eslint基礎環(huán)境搭建
- 全局安裝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一旦發(fā)現(xiàn)配置文件中有 "root": true，它就會停止在父級目錄中尋找嫩痰。
root: true,
// 對Babel解析器的包裝使其與 ESLint 兼容钞艇。
parser: 'babel-eslint',
parserOptions: {
// 代碼是 ECMAScript 模塊
sourceType: 'module'
},
env: {
// 預定義的全局變量啄寡，這里是瀏覽器環(huán)境
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 來配置到開發(fā)環(huán)境中哩照。
并通過 npm install (package) -g 將依賴包安裝到全局環(huán)境下,為什么還要安裝全局環(huán)境下挺物，原因可先行思考，稍后會在結(jié)尾解釋飘弧。
截止目前eslint環(huán)境就配置好了识藤，可執(zhí)行eslint test.js來檢測是否可以運行成功。
visio studio code 配置eslint
- 左側(cè)菜單欄選擇“擴展”次伶，搜索“eslint”安裝并重新加載痴昧，即可實現(xiàn)對.js文件的代碼檢測。
- 在項目中安裝eslint插件：npm install eslint-plugin-html --save-dev (安裝過的就不需要了)
- 配置vsc實現(xiàn)對.vue .html文件中的js代碼段的檢測： 頂部選項Code -> 首選項 -> 設置冠王，搜索編輯“eslint.validate”添加 "html","vue"!
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
]
- 可以打開項目中.vue文件赶撰，發(fā)現(xiàn)不規(guī)范的語法都已經(jīng)被紅色波浪線標記出來了。
配置控制臺的eslint檢測環(huán)境
如果你想在控制臺查看項目中所有的warning 和 error柱彻，就請繼續(xù)往下看~
- 保證依賴包都在全局環(huán)境目錄下安裝
- 執(zhí)行 eslint --ext .js,.vue src 命令豪娜。 --ext用來指定檢測的文件格式，src是檢測的目錄哟楷。也可以給該指令提供一個更好記的別名侵歇，編輯package.json，在script屬性中新增一條吓蘑。即可通過 npm run lint來檢測項目中的warning 和 error了惕虑。
"scripts": {
"lint": "eslint --ext .js,.vue src"
},
如何給項目配置eslint到這里就講完了坟冲，最后說下問什么要在全局環(huán)境下安裝依賴包吧。
- 只有全局環(huán)境下安裝了eslint才能執(zhí)行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令溃蔫。
- 當項目執(zhí)行eslint檢測時健提，會先檢測全局環(huán)境下有沒有eslint，顯然文章第一步就是在全局安裝了伟叛，那么全局環(huán)境下的eslint引用依賴包時也只會在全局環(huán)境下查找私痹。
- 如果你現(xiàn)在或之后不需要給項目初始化一個eslint配置，也不需要在控制臺輸出所有的warning和error统刮，那么就不要全局環(huán)境下的eslint紊遵。執(zhí)行 npm configs 查看全局環(huán)境下的包的安裝路徑，如果發(fā)現(xiàn)有eslint就刪掉好了侥蒙。
啰里啰嗦講完了暗膜，多謝看完。第一次寫文章鞭衩，有些詞不達意学搜，請多多指正。
附錄：
eslint官方文檔： http://eslint.cn/docs/user-guide/configuring
eslint規(guī)則說明：http://www.cnblogs.com/hahazexia/p/6393212.html
