ESLint在vue中的使用

ESLint的用途

1.審查代碼是否符合編碼規範和統一的代碼風格；

2.審查代碼是否存在語法錯誤； 

中文網地址  http://eslint.cn/

使用VSCode編譯器在Vue項目中的使用

在初始化項目時選擇是否使用ESLint管理代碼(選擇Y則默認開啓) 

Use ESLint to lint your code? (Y/n)

（此圖僅爲發小程序的mpvue框架使用）

默認使用的是此標準 https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md

如下是對.editorconfig、.eslintignore、.eslintrc.js 文件進行詳細解釋

.editorconfig文件（主要用於配置IDE）

規範縮進風格，縮進大小，tab長度以及字符集等,解決不一樣IDE的編碼範設置。EditorConfig 插件會去查找當前編輯文件的所在文件夾或其上級文件夾中是否有 .editorconfig 文件。若是有，則編輯器的行爲會與 .editorconfig 文件中定義的一致，而且其優先級高於編輯器自身的設置。

root = true# 對全部文件有效 //[*js]只對js文件有效

[*]

#設置編碼格式

charset = utf-8#縮進類型 可選space和tab

indent_style = space

#縮進數量可選整數值2 or 4,或者tab

indent_size = 2#換行符的格式

end_of_line = lf

# 是否在文件的最後插入一個空行 可選true和false

insert_final_newline = true# 是否刪除行尾的空格 可選擇true和false

trim_trailing_whitespace = true

.eslintignore文件（放置須要ESLint忽略的文件，只對.js文件有效）

/build//config//dist//src/utils//src/router/*.js

.eslintrc.js 文件(用來配置ESLint的檢查規則)

 

module.exports = {

//此項是用來告訴eslint找當前配置文件不能往父級查找

root: true,

//此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析

parser: 'babel-eslint',

//此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置爲module，指某塊導入方式

parserOptions: {

sourceType: 'module'

},

//此項指定環境的全局變量，下面的配置指定爲瀏覽器環境

env: {

browser: true,

},

// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style

// 此項是用來配置標準的js風格，就是說寫代碼的時候要規範的寫，若是你使用vs-code我以爲應該能夠避免出錯

extends: 'standard',

// required to lint *.vue files

// 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規範html的

plugins: [

'html'

],

// add your custom rules here

// 下面這些rules是用來設置從插件來的規範代碼的規則，使用必須去掉前綴eslint-plugin-

// 主要有以下的設置規則，能夠設置字符串也能夠設置數字，二者效果一致

// "off" -> 0 關閉規則

// "warn" -> 1 開啓警告規則

//"error" -> 2 開啓錯誤規則

// 瞭解了上面這些，下面這些代碼相信也看的明白了

rules: {

// allow async-await

'generator-star-spacing': 'off',

// allow debugger during development

'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

// js語句結尾必須使用分號

'semi': ['off', 'always'],

// 三等號

'eqeqeq': 0,

// 強制在註釋中 // 或 /* 使用一致的空格

'spaced-comment': 0,

// 關鍵字後面使用一致的空格

'keyword-spacing': 0,

// 強制在 function的左括號以前使用一致的空格

'space-before-function-paren': 0,

// 引號類型

"quotes": [0, "single"],

// 禁止出現未使用過的變量

// 'no-unused-vars': 0,

// 要求或禁止末尾逗號

'comma-dangle': 0

}

}

「off」 或 0 - 關閉規則

「warn」 或 1 - 開啓規則

「error」 或 2 - 開啓規則

如何在老項目中加入ESlint

1. 在目錄中添加.editorconfig、.eslintrc.js、.eslintignore這三個文件

2. 在package.json的」devDependencies」中加入ESlint所須要的包

"babel-eslint": "^7.1.1",

"eslint": "^3.19.0",

"eslint-config-standard": "^10.2.1",

"eslint-friendly-formatter": "^3.0.0",

"eslint-loader": "^1.7.1",

"eslint-plugin-html": "^3.0.0",

"eslint-plugin-import": "^2.7.0",

"eslint-plugin-node": "^5.2.0",

"eslint-plugin-promise": "^3.4.0",

"eslint-plugin-standard": "^3.0.1",

3. 在bulid/webpack.base.conf.js文件中加入ESlint規則並生效

// 在module的rules中加入

module: {

rules: [

{

test: /\.(js|vue)$/,

loader: 'eslint-loader',

enforce: 'pre',

include: [resolve('src'), resolve('test')],

options: {

formatter: require('eslint-friendly-formatter'),

// 不符合Eslint規則時只警告(默認運行出錯)

// emitWarning: !config.dev.showEslintErrorsInOverlay

}

},

]

}

4. 從新bulid代碼運行,完美生效!!!!!!

---

推薦三個VSCode插件

ESLint (只支持高亮顯示js文件)

EditorConfig

Typings(代碼錯誤提示)

常見的報錯

文件末尾存在空行(eol-last) 

缺乏分號(‘semi’: [‘error’,’always’]) 

關鍵字後面缺乏空格 

字符串沒有使用單引號(’quotes’: [1, ’single’]) 

縮進錯誤 

沒有使用全等(eqeqeq) 

導入組件卻沒有使用 

new了一個對象卻沒有賦值給某個常量(能夠在該實例前添加此代碼/eslint-disable no-new/忽略ESLint的檢查) 

超過一行空白行(no-multiple-empty-lines) 

 

註釋符 // 後面縮進錯誤(lines-around-comment) 

 

VScode用戶配置

{

"workbench.startupEditor": "newUntitledFile",

// 如下是按照ESLint格式化代碼

"vetur.format.defaultFormatter.js": "vscode-typescript",

"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

"editor.quickSuggestions": {

"strings": true

},

"editor.tabSize": 2,

"eslint.validate": [

"javascript",

"javascriptreact",

"html",

"vue",

{

"language": "html",

"autoFix": true

}

],

// "files.autoSave": "onFocusChange",

// "vetur.validation.template": false,

// // 防止格式化代碼後單引號變雙引號

// "prettier.singleQuote": true,

"files.autoSave": "afterDelay",

"files.autoSaveDelay": 1500,

// "git.confirmSync": false

// 配置是否從更新通道接收自動更新。更改後須要重啓。

"update.channel": "none"

}

 

鳴謝：https://blog.csdn.net/IT_HLM/article/details/78776630