vue項目eslint環境配置與vscode配置eslint

eslint基礎環境搭建

1. 全局安裝eslint：npm install eslint -g
2. 項目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

3. 編輯.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
• eslint-plugin-node

經過 npm install (package) --save-dev 來配置到開發環境中。

並經過 npm install (package) -g 將依賴包安裝到全局環境下,爲何還要安裝全局環境下，緣由可先行思考，稍後會在結尾解釋。

截止目前eslint環境就配置好了，可執行eslint test.js來檢測是否能夠運行成功。

visio studio code 配置eslint

1. 左側菜單欄選擇「擴展」，搜索「eslint」安裝並從新加載，便可實現對.js文件的代碼檢測。
2. 在項目中安裝eslint插件：npm install eslint-plugin-html --save-dev (安裝過的就不須要了)
3. 配置vsc實現對.vue .html文件中的js代碼段的檢測： 頂部選項Code -> 首選項 -> 設置，搜索編輯「eslint.validate」添加 "html","vue"!

"eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ] 

4. 能夠打開項目中.vue文件，發現不規範的語法都已經被紅色波浪線標記出來了。

配置控制檯的eslint檢測環境

若是你想在控制檯查看項目中全部的warning 和 error，就請繼續往下看~

1. 保證依賴包都在全局環境目錄下安裝
2. 執行 eslint --ext .js,.vue src 命令。 --ext用來指定檢測的文件格式，src是檢測的目錄。也能夠給該指令提供一個更好記的別名，編輯package.json，在script屬性中新增一條。便可經過 npm run lint來檢測項目中的warning 和 error了。

"scripts": { "lint": "eslint --ext .js,.vue src" }, 

如何給項目配置eslint到這裏就講完了，最後說下問什麼要在全局環境下安裝依賴包吧。

1. 只有全局環境下安裝了eslint才能執行 eslint --init 和 eslint --ext .js,.vue src 等eslint指令。
2. 當項目執行eslint檢測時，會先檢測全局環境下有沒有eslint，顯然文章第一步就是在全局安裝了，那麼全局環境下的eslint引用依賴包時也只會在全局環境下查找。
3. 若是你如今或以後不須要給項目初始化一個eslint配置，也不須要在控制檯輸出全部的warning和error，那麼就不要全局環境下的eslint。執行 npm configs 查看全局環境下的包的安裝路徑，若是發現有eslint就刪掉好了