配置eslint規範專案程式碼風格

摘要： 為什麼要使用eslint 你在接手一個專案的維護迭代任務，閱讀程式碼的時候是否會因為專案中充斥著各種風格的程式碼而感到頭疼？沒錯，eslint就是為了解決這類問題 eslint能做什麼？ 1.程式碼風格錯誤提示 配置好eslint後，如果程式碼風格與配置描述的不符，esl...

為什麼要使用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
}]
}
}