VScode-插件使用以及配置项

1.vscode 版本：

　　版本: 1.56.2 (user setup)

 

 

　　在最新版本中，vscode增加了账户登录选项，实现了配置文件保存在账户中，在更换电脑或者端时，可以直接登录自己账号获取云端vscode配置。

2.配置保存路径

　　github

3.插件列表

　　a.Auto Close Tag

　　　自动闭合标签

　　b.Auto Complete Tag

　　　自动完成标签

　　c.Auto Rename Tag

　　　重命名标签时自动修改闭合标签

　　d.Bracket Pair Colorizer 2

　　　括号用颜色区分，直观显示代码块

　　e.Chinese (Simplified) Language Pack for Visual Studio Code

  　　vscode中文简体

　　f.cssrem

　　　编写css时，将px转换为rem

　　g.Easy LESS

　　　自动编译less

　　h.ES7 React/Redux/GraphQL/React-Native snippets

　　　react，redux,rn代码提示

　　i.Git Graph

　　　git图

　　j.Git History

　　　git 提交历史

　　k.GitLens — Git supercharged

　　　git源代码管理

　　l.Highlight Matching Tag

　　　高亮匹配标签

　　m.javascript console utils

　　　console.log()的简写，提示为clg

　　n.jQuery Code Snippets

　　　jq代码提示

　　o.Live Server

　　　本地开启简易服务器

　　p.Material Icon Theme

　　　项目icon主题

　　q.Path Intellisense

　　　路径智能提示

　　r.SCSS Formatter

　　　scss格式化

　　s.Vetur

　　　vue项目必备

　　t.vue

　　　一键生成vue代码块，推荐使用自定义代码块方式

　　u.ESLint

　　　代码检查

　　v.Prettier - Code formatter

　　　代码格式化

4.部分插件配置项

　　代码格式化时使用Prettier

　

{
    // 对应文件类型使用prettier格式化插件
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

    // vetur格式化的配置 使用js-beautify-html格式化html
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",
            "wrap_line_length": 220,
            "end_with_newline": false
        },
        "prettyhtml": {
            "printWidth": 200,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false,
            "end_with_newline": false
        }
    },
    "vetur.format.options.tabSize": 4,
    "vetur.validation.template": false,

    // 其它文件名映射
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript",
        "*.jsp": "html",
        "*.wxml": "html"
    },

    // 在不受支持的语言中启用标签缩写 例如jsx
    "emmet.includeLanguages": {
        "wxml": "html",
        "javascript": "javascriptreact"
    },

    // 默认从当前git存储库的远程库进行提交拉取
    "git.autofetch": true,
    "git.ignoreMissingGitWarning": true,

    // 文件目录结构的icon主题样式
    "workbench.iconTheme": "material-icon-theme",

    // 保存时运行的代码操作
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.minimap.enabled": false,
    "editor.tabSize": 4,
    "editor.formatOnSave": false,
    "editor.suggestSelection": "first",

    // prettier格式化规则
    "prettier.singleQuote": true,
    "prettier.jsxSingleQuote": true,
    "prettier.tabWidth": 4,
    "prettier.bracketSpacing": true,
    "prettier.arrowParens": "avoid",
    "prettier.printWidth": 200,
    "prettier.endOfLine": "crlf",
    "prettier.trailingComma": "none",
    "prettier.proseWrap": "never",
    "prettier.jsxBracketSameLine": true,

    // python配置规则
    "python.linting.flake8Enabled": true,
    "python.formatting.provider": "yapf",
    "python.formatting.yapfArgs": ["--style", "{column_limit: 200}"],
    "python.linting.flake8Args": ["--max-line-length=248"],
    "python.linting.pylintEnabled": false,
    "python.defaultInterpreterPath": "E:\\Install\\Python38\\python.exe",

    // scss使用重复的样式定义时，报警告
    "scss.lint.duplicateProperties": "warning",

    // liveServer的配置
    "liveServer.settings.useLocalIp": true,
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,

    // 解决合并冲突后自动转到下一个冲突
    "merge-conflict.autoNavigateNextConflict.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,

    // 启用js文件中的codeLen引用
    "javascript.referencesCodeLens.showOnAllFunctions": true,
    // 自动更新导入的路径
    "javascript.updateImportsOnFileMove.enabled": "always",

    // 编辑器优化
    "workbench.startupEditor": "newUntitledFile",
    "workbench.enableExperiments": false,
    "workbench.settings.enableNaturalLanguageSearch": false,
    "workbench.editor.enablePreview": false,
    "workbench.editorAssociations": [
        {
            "viewType": "jupyter.notebook.ipynb",
            "filenamePattern": "*.ipynb"
        }
    ],

    // vscode更新后不显示最新的发行说明
    "update.showReleaseNotes": false,

    // 文件目录输入@符号后路径映射
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src",
        "@components": "${workspaceRoot}/src/components",
        "@views": "${workspaceRoot}/src/views",
        "@config": "${workspaceRoot}/src/config",
        "@assets": "${workspaceRoot}/src/assets",
        "@common": "${workspaceRoot}/src/common"
    },

    // 对双大括号语法进行缩进
    "html.format.indentHandlebars": true,
    // 属性垂直对齐
    "html.format.wrapAttributes": "aligned-multiple"
}