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

總結

以上是生活随笔為你收集整理的vue项目配置eslint(附visio studio code配置)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。