vscode编辑器统一配置规范

一、vscode必装插件

1、eslint ：代码校验

2、stylelint：样式代码校验

3、GitLens：代码编辑历史人员信息

4、Git History：当前版本与上一版本代码比对

5、Vetur：vue项目插件，提供语法高亮、校验等能力

6、vscode-fileheader：页面头部注释快捷方式

7、Auto Rename Tag：标签同步更改

8、Auto Close Tag：自动闭合标签

二、vscode配置文件

建议将下列配置项设置为user配置，全局生效，避免每个项目都进行配置。

ps：

1、字体大小可以自行调整，不做强制要求

2、fileheader的配置需要改为自己的信息，不可直接复制使用

{

    "editor.fontSize": 16,

    "eslint.autoFixOnSave": true,

    "vetur.validation.template": false,

    "vetur.format.defaultFormatter.html": "js-beautify-html",

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            "indent_size": 4,

            "wrap_attributes": "force-aligned"

        },

        "prettier": {

            "tabWidth": 4,

            "printWidth": 120,

            "singleQuote": true,

            "eslintIntegration": true,

            "stylelintIntegration": true

        }

    },

    "prettier.tabWidth": 4,

    "prettier.singleQuote": true,

    "prettier.semi": true,

    "prettier.printWidth": 120,

    "files.associations": {

        "*.vue": "vue"

    },

    "eslint.validate": [

        "javascript",

        "javascriptreact",

        {

            "language": "vue",

            "autoFix": true

        }

    ],

    "css.validate": true,

    "less.validate": true,

    "scss.validate": true,

    "fileheader.LastModifiedBy": "tangliang",

    "fileheader.tpl": "/*\\r\\n * @Author: {author}\\r\\n * @Email: [email protected]\\r\\n * @Date: {createTime}\\r\\n * @Last Modified by: {lastModifiedBy}\\r\\n * @Last Modified time: {updateTime}\\r\\n * @Description: Description\\r\\n * @Route: Route\\r\\n */\\r\\n",

    "fileheader.Author": "tangliang",

    "prettier.stylelintIntegration": true,

    "prettier.eslintIntegration": true,

"files.insertFinalNewline": true

}

三、配置方式：

1、利用command + 逗号快捷键打开配置页面，如下图：

2、选择User栏目，点击右上角的大括号，进入settings.json文件，将上面的配置项粘贴进去即可。