eslint安装

安装eslint

npm i -g eslint //全局安装
npm i -D eslint //局部安装

安装完毕后 初始化

npm init //查看该目录是否有package.json文件，没有先安装 
eslint --init  //得到.eslintrc.js 文件 或者自己手动写一个该文件

配置eslintrc.js文件

module.exports = {
    root: true,
    parserOptions: {
        //指定想要支持的 JavaScript [语言选项]
        parser: 'babel-eslint'
    },
    env: {
       //指定要启用的环境 检测时不会把这些环境 全局变量识别成未定义的变量而报错
        browser: true,
    },
    extends: [
        // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
        // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
        'plugin:vue/essential',
        // https://github.com/standard/standard/blob/master/docs/RULES-en.md
        'standard'
    ],
    // required to lint *.vue files
    plugins: [
        'vue'
    ],
    // add your custom rules here
    rules: {
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 未使用的变量
        'no-unused-vars': 'off',
        // tab键提示
        'no-tabs': 'true',
        // 没有意义的表达式                     
        'no-unused-expressions': 'off',
        // new操作不赋值
        'no-new': 'off',
        // 使用未定义的变量
        'no-undef': 'off',
        'quotes': [2, 'single', 'avoid-escape']
    }
}

VScode eslint-plugin-vue 自动修复eslint报错

npm i -g eslint-plugin-vue

image.png

添加eslint 和 vetur 插件

image.png image.png image.png

//用户配置里面
{
  "editor.tabSize":2,  #代码缩进修改成2个空格
  "editor.formatOnSave": true,  #每次保存的时候自动格式化
  "eslint.autoFixOnSave": false,  #每次保存的时候将代码按eslint格式进行修复
  "prettier.eslintIntegration": true,  #让prettier使用eslint的代码格式进行校验
  "prettier.semi": false,  #去掉代码结尾的分号
  "prettier.singleQuote": true,  #使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true  #让函数(名)和后面的括号之间加个空格
}

//作者本人的用户配置：
{
  //开启 eslint 支持
  "prettier.eslintIntegration": true,
  //使用单引号
  "prettier.singleQuote": true,
  //结尾不加分号
  "prettier.semi": true,
  //.vue文件template格式化支持，并使用js-beautify-html插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  //js-beautify-html格式化配置，属性强制换行
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto", //vue组件中html代码格式化样式
      "end_with_newline": false
    }
  },
  //根据文件后缀名定义vue文件类型
  "files.associations": {
    "*.vue": "vue"
  },
  //配置 ESLint 检查的文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //保存时eslint自动修复错误
  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
  //保存自动格式化
  "editor.formatOnSave": true,
  "workbench.startupEditor": "newUntitledFile",
  "files.autoSave": "off",
  "window.zoomLevel": 0,
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "git.autofetch": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "editor.tabSize": 2,
  "editor.fontSize": 14,
  "editor.lineHeight": 26,
  "git.enableSmartCommit": true,
  "workbench.iconTheme": "material-icon-theme",
  "files.enableTrash": false,
  "sync.gist": "49fa325daff8107a0eb19ab496b9f40d",
  "editor.minimap.enabled": false,
  "eslint.alwaysShowStatus": true,
}