eslint基礎環境搭建
- 全局安裝eslint：npm install eslint -g
- 項目eslint初始化：eslint --init，按團隊或自己的編程風格回答三道題。
- ? How would you like to configure ESLint? Use a popular style guide
- ? Which style guide do you want to follow? Standard
- ? What format do you want your config file to be in? JavaScript
- 編輯.eslintrc.js
module.exports = {
// 默認情況下，ESLint會在所有父級組件中尋找配置文件，一直到根目錄。ESLint一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。
root: true,
// 對Babel解析器的包裝使其與 ESLint 兼容。
parser: 'babel-eslint',
parserOptions: {
// 代碼是 ECMAScript 模塊
sourceType: 'module'
},
env: {
// 預定義的全局變量，這里是瀏覽器環境
browser: true,
},
// 擴展一個流行的風格指南，即 eslint-config-standard
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
// 此插件用來識別.html 和 .vue文件中的js代碼
'html',
// standard風格的依賴包
"standard",
// standard風格的依賴包
"promise"
],
// 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
}
}
3.安裝配置文件中依賴包：
- eslint
- babel-eslint
- eslint-plugin-html
- eslint-config-standard
- eslint-plugin-standard
- eslint-plugin-promise
通過 npm install (package) --save-dev 來配置到開發環境中。
并通過 npm install (package) -g 將依賴包安裝到全局環境下,為什么還要安裝全局環境下，原因可先行思考，稍后會在結尾解釋。
截止目前eslint環境就配置好了，可執行eslint test.js來檢測是否可以運行成功。
visio studio code 配置eslint
- 左側菜單欄選擇“擴展”，搜索“eslint”安裝并重新加載，即可實現對.js文件的代碼檢測。
- 在項目中安裝eslint插件：npm install eslint-plugin-html --save-dev (安裝過的就不需要了)
- 配置vsc實現對.vue .html文件中的js代碼段的檢測： 頂部選項Code -> 首選項 -> 設置，搜索編輯“eslint.validate”添加 "html","vue"!
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
]
- 可以打開項目中.vue文件，發現不規范的語法都已經被紅色波浪線標記出來了。
配置控制臺的eslint檢測環境
如果你想在控制臺查看項目中所有的warning 和 error，就請繼續往下看~
- 保證依賴包都在全局環境目錄下安裝
- 執行 eslint --ext .js,.vue src 命令。 --ext用來指定檢測的文件格式，src是檢測的目錄。也可以給該指令提供一個更好記的別名，編輯package.json，在script屬性中新增一條。即可通過 npm run lint來檢測項目中的warning 和 error了。
"scripts": {
"lint": "eslint --ext .js,.vue src"
},
如何給項目配置eslint到這里就講完了，最后說下問什么要在全局環境下安裝依賴包吧。
- 只有全局環境下安裝了eslint才能執行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。
- 當項目執行eslint檢測時，會先檢測全局環境下有沒有eslint，顯然文章第一步就是在全局安裝了，那么全局環境下的eslint引用依賴包時也只會在全局環境下查找。
- 如果你現在或之后不需要給項目初始化一個eslint配置，也不需要在控制臺輸出所有的warning和error，那么就不要全局環境下的eslint。執行 npm configs 查看全局環境下的包的安裝路徑，如果發現有eslint就刪掉好了。
啰里啰嗦講完了，多謝看完。第一次寫文章，有些詞不達意，請多多指正。
附錄：
eslint官方文檔： http://eslint.cn/docs/user-guide/configuring
eslint規則說明：http://www.cnblogs.com/hahazexia/p/6393212.html
