vue中eslint的简单配置

vue中的eslint可以帮我们检测代码,还可以帮我们格式化代码,下来我们对他进行一些简单的配置,用到的编辑器是vscode.

首先我们在vscode的商店里下载3个插件, ESlint , Prettier - Code formatter , Vetur.
下载完成后打开vscode的首选项中的设置(我这里用到的是mac版本)

1.png

然后在左侧找到扩展下面的Eslint选项,点击右边的在settings.json中编辑

2.png

打开之后添加下面的这段代码然后保存

//每次保存的时候按照eslint格式进行修复
    "eslint.autoFixOnSave": true,
    //添加vue语言的支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
           "autoFix": true 
        }
    ],

回到我们的项目中,找到.eslintrc.js配置文件,在rules中我们可以覆盖他的一些默认配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    // 添加⾃自定义规则
    "prettier/prettier": [
      // eslint校验不不成功后配置提示等级，配置error或2则报错，warn或1则警告，off或0则⽆无提示
      "error",//2,
      //然后我们加两个配置singleQuote表示使用单引号,semi设为false表示代码尾部不加  ";"
      {
        singleQuote: true,
        semi: false
      }
    ]
  },

parserOptions: {
    parser: 'babel-eslint'
  }
}

配置之前的代码,可以看到代码后边有;结尾的已经开始报错了

5.png

6.png

配置完成后保存,然后执行package.json中的lint命令: npm run lint

7.png

8.png

可以看到他已经自动帮我们格式化了.我们并不需要每次都执行npm run lint;
执行一次之后只要检测我们的代码不符合规范,我们保存代码他会自动帮我们格式化.如下:

1.gif