如何在Vue項目中使用ESLint方法？針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
ESLint是一個QA工具，用來避免低級錯誤和統(tǒng)一代碼的風(fēng)格
ESLint的用途
1.審查代碼是否符合編碼規(guī)范和統(tǒng)一的代碼風(fēng)格；
2.審查代碼是否存在語法錯誤；
中文網(wǎng)地址 http://eslint.cn/
使用VSCode編譯器在Vue項目中的使用
在初始化項目時選擇是否使用
ESLint管理代碼(選擇Y則默認開啟)
Use ESLint to lint your code? (Y/n)
默認使用的是此標準https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md
以下是對.editorconfig、.eslintignore、.eslintrc.js 文件進行詳細解釋
.editorconfig文件（主要用于配置IDE）
規(guī)范縮進風(fēng)格，縮進大小，tab長度以及字符集等,解決不同IDE的編碼范設(shè)置。EditorConfig 插件會去查找當(dāng)前編輯文件的所在文件夾或其上級文件夾中是否有 .editorconfig 文件。如果有，則編輯器的行為會與 .editorconfig 文件中定義的一致，并且其優(yōu)先級高于編輯器自身的設(shè)置。
root = true # 對所有文件有效 //[*js]只對js文件有效 [*] #設(shè)置編碼格式 charset = utf-8 #縮進類型 可選space和tab indent_style = space #縮進數(shù)量可選整數(shù)值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的檢查規(guī)則)
重慶分公司
重慶分公司
module.exports = {
//此項是用來告訴eslint找當(dāng)前配置文件不能往父級查找
root: true,
//此項是用來指定eslint解析器的，解析器必須符合規(guī)則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析
parser: 'babel-eslint',
//此項是用來指定javaScript語言類型和風(fēng)格，sourceType用來指定js導(dǎo)入的方式，默認是script，此處設(shè)置為module，指某塊導(dǎo)入方式
parserOptions: {
sourceType: 'module'
},
//此項指定環(huán)境的全局變量，下面的配置指定為瀏覽器環(huán)境
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
// 此項是用來配置標準的js風(fēng)格，就是說寫代碼的時候要規(guī)范的寫，如果你使用vs-code我覺得應(yīng)該可以避免出錯
extends: 'standard',
// required to lint *.vue files
// 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規(guī)范html的
plugins: [
'html'
],
// add your custom rules here
// 下面這些rules是用來設(shè)置從插件來的規(guī)范代碼的規(guī)則，使用必須去掉前綴eslint-plugin-
// 主要有如下的設(shè)置規(guī)則，可以設(shè)置字符串也可以設(shè)置數(shù)字，兩者效果一致
// "off" -> 0 關(guān)閉規(guī)則
// "warn" -> 1 開啟警告規(guī)則
//"error" -> 2 開啟錯誤規(guī)則
// 了解了上面這些，下面這些代碼相信也看的明白了
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// js語句結(jié)尾必須使用分號
'semi': ['off', 'always'],
// 三等號
'eqeqeq': 0,
// 強制在注釋中 // 或 /* 使用一致的空格
'spaced-comment': 0,
// 關(guān)鍵字后面使用一致的空格
'keyword-spacing': 0,
// 強制在 function的左括號之前使用一致的空格
'space-before-function-paren': 0,
// 引號類型
"quotes": [0, "single"],
// 禁止出現(xiàn)未使用過的變量
// 'no-unused-vars': 0,
// 要求或禁止末尾逗號
'comma-dangle': 0
}
}“off” 或 0 - 關(guān)閉規(guī)則
“warn” 或 1 - 開啟規(guī)則
“error” 或 2 - 開啟規(guī)則
如何在老項目中加入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規(guī)則并生效
// 在module的rules中加入
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
// 不符合Eslint規(guī)則時只警告(默認運行出錯)
// emitWarning: !config.dev.showEslintErrorsInOverlay
}
},
]
}4. 重新bulid代碼運行,完美生效!!!!!!
推薦三個VSCode插件
ESLint (只支持高亮顯示js文件)
EditorConfig
Typings(代碼錯誤提示)
常見的報錯
文件末尾存在空行(eol-last)
缺少分號(‘semi': [‘error','always'])
關(guān)鍵字后面缺少空格
字符串沒有使用單引號('quotes': [1, 'single'])
縮進錯誤
沒有使用全等(eqeqeq)
導(dǎo)入組件卻沒有使用
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"
}關(guān)于如何在Vue項目中使用ESLint方法問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道了解更多相關(guān)知識。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
