vscode+eslint 统一修复代码样式

一、安装eslint

 

 

 二、打开vscode 的settings.json并配置

 

 

 在输入框中输入“settings”，这时就可以看到了

 

 

 

 

 

替换为如下代码

 1 {
 2     "workbench.iconTheme": "material-icon-theme",
 3     "explorer.confirmDragAndDrop": false,
 4     "explorer.confirmDelete": false,
 5     //配置eslint
 6     "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
 7     "eslint.validate": [
 8        "javascript",  //  用eslint的规则检测js文件
 9        {
10          "language": "vue",   // 检测vue文件
11          "autoFix": true   //  为vue文件开启保存自动修复的功能
12        },
13        {
14          "language": "html",
15          "autoFix": true
16        },
17     ],
18     "editor.codeActionsOnSave": {
19         "source.fixAll.eslint": true
20     },
21   
22   }

三、修改eslint配置文件

 

 代码如下：

 1 module.exports = {
 2   root: true,
 3   env: {
 4     node: true
 5   },
 6   extends: [
 7     'plugin:vue/essential',
 8     '@vue/standard'
 9   ],
10   parserOptions: {
11     parser: 'babel-eslint'
12   },
13   rules: {
14     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
16   },
17     // required to lint *.vue files
18   plugins: ['vue'],
19 }

保存后打开有错误的代码，再次保存后即可修复

posted @ 2020-08-20 17:50  疯狗强尼  阅读(605)  评论(0)  编辑  收藏  举报