Vue中使用eslint代码检测

版权声明：欢迎转载，转载请注明来源，谢谢！ https://blog.csdn.net/a8725585/article/details/80081491

如何使用

1、第一种 使用脚手架时配置

使用vue-cli脚手架构建webpack模板的vue项目时会询问你是否使用eslint 选择yes 之后选择检测的配置文件

a.选择eslint语法检测

b.选择配置文件

这里我选择的standard 据说airbnb非常严格

这样生成之后就自带了代码检测

测试一下

cd myapp
npm run dev

显示没问题接下来我们将代码修改一下

出错了函数和参数需要有空格。

2、在已有项目(vue-cli创建未配置eslint)中安装eslint

a.将第一种方法里生成的eslintrc.js拷贝到旧项目跟目录里

b.修改packge.json添加eslint相关模块

c.webpack.base.conf.js配置文件中添加加载器

{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },

d.npm install 安装一下模块就行了

3、vscode编辑器代码检测错误提示

a.安装eslint、Vetur插件

b.配置

{
    "workbench.startupEditor": "welcomePage",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.tabSize": 2,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      "vue",
      {
        "language": "html",
        "autoFix": true
      }
    ],
    "files.associations": {
      "*.vue": "vue"
    }
  }

c.vscode小技巧

右下角可以选择tab 空格数 文件的语言