最近用webpack4 ( 非vue-cli ) 搭建了一個(gè)vue項(xiàng)目，因?yàn)橐投嗳藚f(xié)作完成，所以配置了eslint。因?yàn)榫W(wǎng)上的教程都有點(diǎn)過(guò)時(shí)了，讓我踩了坑，這里提供的是 2019/5/2 的最新配置方法，并且還提供了vscode 的 ESLint + Prettier + Vetur 擴(kuò)展配置，以便于更好地支持eslint。

適用對(duì)象：webpack4 + vue2 以及 vscode使用者

webpack 配置

安裝依賴

總依賴列表, 你可以復(fù)制進(jìn)package.json, 然后用 npm install 安裝。

devDependencies:{
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-html": "^5.0.3",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.2.2",
}

package.json 配置

為了添加一個(gè) lint 命令，用來(lái)檢測(cè)語(yǔ)法錯(cuò)誤，npm run lint 就可以使用。

"scripts": {
    "build": "webpack --mode=production --config build/webpack.base.conf.js",
    "dev": "NODE_ENV=development webpack-dev-server --config build/webpack.base.conf.js",
    "lint": "eslint --ext .js,.vue src" // 添加這一行
  },

webpack.config.js 配置

對(duì)js文件和vue文件啟用eslint檢查，由于enforce是 'pre' ，所以它會(huì)在編譯前檢查。
注意： resolve('src') 的resolve函數(shù)需要自己定義，其實(shí)就是根目錄下的src文件。

rules:[
  ···
  {
    test: /\.(js|vue)$/,
    use: {
      loader: 'eslint-loader',
      options: {
        formatter: require('eslint-friendly-formatter') // 默認(rèn)的錯(cuò)誤提示方式
      }
    },
    enforce: 'pre', // 編譯前檢查
    include: [resolve('src')]
  },
]

.eslintrc.js 配置

這是eslint的主要配置文件，之前我踩的坑也是因?yàn)檫@里的配置經(jīng)常出錯(cuò)。當(dāng)然，在未來(lái)可能我這個(gè)配置也會(huì)過(guò)時(shí)，推薦大家多查看下官方文檔：https://vuejs.github.io/eslint-plugin-vue/user-guide/#usage

可以將下面對(duì)內(nèi)容完整復(fù)制進(jìn)根目錄下創(chuàng)建的 .eslintrc.js 文件。

module.exports = {
  root: true,
  env: {
    browser: true
  },
  extends: ['standard', 'plugin:vue/recommended'], 
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  plugins: ['vue', 'html'],
  // 對(duì)vue文件取消了縮進(jìn)檢查
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        indent: 'off'
      }
    }
  ],
  rules: {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    'no-irregular-whitespace': [
      'error',
      {
        skipComments: true,
        skipTemplates: true
      }
    ],
    'no-unused-vars': ['warn']
  }
}

.eslintignore 配置

該文件主要是讓eslint忽略這些文件夾下的語(yǔ)法檢查，可以是dist目錄下，build 目錄下的js文件。

同樣，可以將下面對(duì)內(nèi)容完整復(fù)制進(jìn)根目錄下創(chuàng)建的 .eslintignore 文件。

build/*.js
dist/*.js
src/assets/js/*.js

.editorconfig

這是我個(gè)人推薦加的配置文件，如果你只需要eslint可以不加。用來(lái)告訴編輯器你的項(xiàng)目一些規(guī)則比如代碼縮進(jìn)。
同樣，你可以復(fù)制然后放在根目錄下創(chuàng)建的 .editorconfig 文件

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

webpack的配置到此結(jié)束啦，下面介紹vscode的配置。

vscode

這里不廢話直接放配置文件，先在擴(kuò)展那里安裝ESLint + Prettier + Vetur 這三個(gè)插件，然后按 ctrl+shift+t 打開(kāi) setting.json 就可以往里面貼配置啦。

{
  // tab 大小為2個(gè)空格
  "editor.tabSize": 2,
  // 100 列后換行
  "editor.wordWrapColumn": 100,
  // 保存時(shí)格式化
  "editor.formatOnSave": true,
  // prettier 設(shè)置強(qiáng)制單引號(hào)
  "prettier.singleQuote": true,
  // prettier 去分號(hào)
  "prettier.semi": false,
  // prettier 開(kāi)啟eslint規(guī)范
  "prettier.eslintIntegration": true,
  // prettier 在vue文件禁用
  "prettier.disableLanguages": ["vue"],
  // 設(shè)置 eslint 保存時(shí)自動(dòng)修復(fù)
  "eslint.autoFixOnSave": true, // try
  // eslint 檢測(cè)文件類型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // vetur 的自定義設(shè)置
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false
    },
    "prettier": {
      "singleQuote": true,
      "proseWrap": "never",
      "printWidth": 100
    }
  },
  // 選擇 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "none",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  // 文件自動(dòng)保存
  "files.autoSave": "afterDelay",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 括號(hào)前加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true
}

創(chuàng)作不易，有需要幫助的留言，覺(jué)得有用的請(qǐng)點(diǎn)贊哦～??