配置eslint規範項目代碼風格

爲何要使用eslint

你在接手一個項目的維護迭代任務，閱讀代碼的時候是否會由於項目中充斥着各類風格的代碼而感到頭疼？沒錯，eslint就是爲了解決這類問題

eslint能作什麼？

1.代碼風格錯誤提示

配置好eslint後，若是代碼風格與配置描述的不符，eslint會提示代碼中存在的風格問題；通常提示的情形有：
1.編輯器內，大多數編輯器配置好後能讀取eslint配置文件並在文件中進行相應提示
2.eslint-loader配合webpack-dev-server能在頁面中彈出相應錯誤內容
3.eslint經過命令號對代碼進行風格檢查

2.修復相應風格問題

eslint --fix 命令能修復一部分代碼風格問題；能修復的範圍見https://cn.eslint.org/docs/ru...

常見問題

如何在局部禁用eslint

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

如下是詳細配置

{
  root: true,// 直接在根目錄讀取配置文件，能提升eslint性能
  "env": {
    "node": true,// 容許使用nodejs相關的變量，下同
    "es6": true,
    "browser": true,
    "commonjs": true
  },
  "extends": "standard", // 繼承eslint-config-standard中的配置，能夠在rules中覆蓋
  "parser": "babel-eslint", // 爲eslint制定parser,默認的Esprima只容許已歸入es標準的內容
  "plugins": "vue",// 使用eslint-plugin-vue，使eslint能對vue語法進行處理，相應rules見https://eslint.vuejs.org/rules/
  "rules": {
    "no-alert": 2,
    "indent": ["error", 4, {
      "SwitchCase": 1,
      "VariableDeclarator": 1,
      "outerIIFEBody": 1,
      "MemberExpression": 1,
      "FunctionDeclaration": { "parameters": 1, "body": 1 },
      "FunctionExpression": { "parameters": 1, "body": 1 },
      "CallExpression": { "arguments": 1 },
      "ArrayExpression": 1,
      "ObjectExpression": 1,
      "ImportDeclaration": 1,
      "flatTernaryExpressions": false,
      "ignoreComments": false
    }]
  }
}