vue 使用 eslint

新项目在安装的时候选择  eslint 就会自动生成

旧项目使用

1、安装一个新项目使用 eslint ，然后把根目录的 .eslintrc.js 文件 和 .editorconfig 文件复制到旧项目根目录

2、把新项目里面的 package.json 里面有关 eslint 的内容都复制到旧项目的 package.json 里面，然后 npm install 下载这些配置

"devDependencies": {
    ……    

    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0"，

    ……
}

3、在配置文件 webpack.base.conf.js 里面加上对 vue 的解析

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

4、vscode 编辑器保存自动格式化为 eslint 格式

     1. 先下载 eslint 插件

     2.在vscode的文件-首选项-设置里，查找eslint，点击在setting.json 里面编辑，配置里添加如下代码即可（代码有注释！），从此直接 Ctrl+S 就能一键格式化了

// vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化 
  "editor.formatOnSave": true,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.autoFixOnSave": true,
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #这个按用户自身习惯选择 
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化 
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    },

  }

3.设置代码后面强制加分号

       在vue根目录的  .eslintrc.js 文件的 rules 文件里面添加一个 'semi': ['error', 'always'], 如下

 rules: {
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'semi': ['error', 'always'], //添加这一项
    }