概述:
ESLint 是一個開源的 JavaScript 代碼檢查工具,由 Nicholas C. Zakas 於2013年6月創建。代碼檢查是一種靜態的分析,常用於尋找有問題的模式或者代碼,並且不依賴於具體的編碼風格。對大多數編程語言來說都會有代碼檢查,一般來說編譯程序會內置檢查工具。
JavaScript 是一個動態的弱類型語言,在開發中比較容易出錯。因為沒有編譯程序,為了尋找 JavaScript 代碼錯誤通常需要在執行過程中不斷調試。像 ESLint 這樣的可以讓程序員在編碼的過程中發現問題而不是在執行的過程中。
ESLint 的初衷是為了讓程序員可以創建自己的檢測規則。ESLint 的所有規則都被設計成可插入的。ESLint 的默認規則與其他的插件並沒有什么區別,規則本身和測試可以依賴於同樣的模式。為了便於人們使用,ESLint 內置了一些規則,當然,你可以在使用過程中自定義規則。
ESLint 使用 Node.js 編寫,這樣既可以有一個快速的運行環境的同時也便於安裝。
特點:
所有都是可拔插的
- 內置規則和自定義規則共用一套規則 API
- 內置的格式化方法和自定義的格式化方法共用一套格式化 API
- 額外的規則和格式化方法能夠在運行時指定
- 規則和對應的格式化方法並不強制捆綁使用
每條規則:
- 各自獨立
- 可以開啟或關閉(沒有什么可以被認為“太重要所以不能關閉”)
- 可以將結果設置成警告或者錯誤
另外:
- ESLint 並不推薦任何編碼風格,規則是自由的
- 所有內置規則都是泛化的
項目:
- 通過豐富文檔減少溝通成本
- 盡可能的簡單透明
- 相信測試的重要性
配置:
全局安裝:
cnpm install -g eslint
初始化:
eslint --init
初始化后按照提示安裝
npm install --save setimmediate
配置:Build/webpack.base.conf.js
rules: [ { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } } ]
文件配置
初始化后按照提示安裝(插件)
cnpm install eslint-friendly-formatter
cnpm install eslint-loader
安裝兼用vue
cnpm install eslint-plugin-html
.eslintrc.js 添加聲明vue使用
module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here '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 } }
Eslint報錯錯誤統計:
enlint 有很多的rules,為了改變rule的設置,可以設置rule ID等同於一些規則屬性:如
"off" or 0 關閉規則
"warn" or 1 打開規則,出現警告提示
"error" or 2 打開規則,出現錯誤提示
參數說明:
參數1 : 錯誤等級
參數2 : 處理方式
- 結尾分號:
"semi": ["error", "always"]
錯誤信息: semi Missing semicolon 結尾沒有‘;’
2.單/雙引號
"quotes": ["error", "double" ],
"quotes": ["error", "single" ],
錯誤信息:quotes Strings must use doublequote引用字符串必須使用雙引號
3.隔斷限制(還沒弄清楚)
"linebreak-style": ["error", "" ],
錯誤信息:
4.縮進限制:
"indent": ["error",4],
錯誤信息:
5.函數參數不能重復
"no-dupe-args": ["error", 2]
錯誤信息:Parsing error: Argument name clash 解析錯誤:參數名稱沖突
參考:https://www.cnblogs.com/luxiaoxiao/p/6432788.html
官網:http://eslint.cn/