如何在Vue項(xiàng)目中使用ESLint方法?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
創(chuàng)新互聯(lián)建站主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)善左,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
ESLint是一個(gè)QA工具,用來避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格
ESLint的用途
1.審查代碼是否符合編碼規(guī)范和統(tǒng)一的代碼風(fēng)格;
2.審查代碼是否存在語法錯(cuò)誤;
中文網(wǎng)地址 http://eslint.cn/
使用VSCode編譯器在Vue項(xiàng)目中的使用
在初始化項(xiàng)目時(shí)選擇是否使用
ESLint管理代碼(選擇Y則默認(rèn)開啟)
Use ESLint to lint your code? (Y/n)
默認(rèn)使用的是此標(biāo)準(zhǔn)https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md
以下是對(duì).editorconfig、.eslintignore、.eslintrc.js 文件進(jìn)行詳細(xì)解釋
.editorconfig文件(主要用于配置IDE)
規(guī)范縮進(jìn)風(fēng)格,縮進(jìn)大小,tab長度以及字符集等,解決不同IDE的編碼范設(shè)置。EditorConfig 插件會(huì)去查找當(dāng)前編輯文件的所在文件夾或其上級(jí)文件夾中是否有 .editorconfig 文件。如果有,則編輯器的行為會(huì)與 .editorconfig 文件中定義的一致,并且其優(yōu)先級(jí)高于編輯器自身的設(shè)置。
root = true # 對(duì)所有文件有效 //[*js]只對(duì)js文件有效 [*] #設(shè)置編碼格式 charset = utf-8 #縮進(jìn)類型 可選space和tab indent_style = space #縮進(jìn)數(shù)量可選整數(shù)值2 or 4,或者tab indent_size = 2 #換行符的格式 end_of_line = lf # 是否在文件的最后插入一個(gè)空行 可選true和false insert_final_newline = true # 是否刪除行尾的空格 可選擇true和false trim_trailing_whitespace = true
.eslintignore文件(放置需要ESLint忽略的文件,只對(duì).js文件有效)
/build/ /config/ /dist/ /src/utils/ /src/router/*.js
.eslintrc.js 文件(用來配置ESLint的檢查規(guī)則)
module.exports = { //此項(xiàng)是用來告訴eslint找當(dāng)前配置文件不能往父級(jí)查找 root: true, //此項(xiàng)是用來指定eslint解析器的,解析器必須符合規(guī)則,babel-eslint解析器是對(duì)babel解析器的包裝使其與ESLint解析 parser: 'babel-eslint', //此項(xiàng)是用來指定javaScript語言類型和風(fēng)格,sourceType用來指定js導(dǎo)入的方式,默認(rèn)是script,此處設(shè)置為module,指某塊導(dǎo)入方式 parserOptions: { sourceType: 'module' }, //此項(xiàng)指定環(huán)境的全局變量,下面的配置指定為瀏覽器環(huán)境 env: { browser: true, }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style // 此項(xiàng)是用來配置標(biāo)準(zhǔn)的js風(fēng)格,就是說寫代碼的時(shí)候要規(guī)范的寫,如果你使用vs-code我覺得應(yīng)該可以避免出錯(cuò) extends: 'standard', // required to lint *.vue files // 此項(xiàng)是用來提供插件的,插件名稱省略了eslint-plugin-,下面這個(gè)配置是用來規(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 開啟錯(cuò)誤規(guī)則 // 了解了上面這些,下面這些代碼相信也看的明白了 rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // js語句結(jié)尾必須使用分號(hào) 'semi': ['off', 'always'], // 三等號(hào) 'eqeqeq': 0, // 強(qiáng)制在注釋中 // 或 /* 使用一致的空格 'spaced-comment': 0, // 關(guān)鍵字后面使用一致的空格 'keyword-spacing': 0, // 強(qiáng)制在 function的左括號(hào)之前使用一致的空格 'space-before-function-paren': 0, // 引號(hào)類型 "quotes": [0, "single"], // 禁止出現(xiàn)未使用過的變量 // 'no-unused-vars': 0, // 要求或禁止末尾逗號(hào) 'comma-dangle': 0 } }
“off” 或 0 - 關(guān)閉規(guī)則
“warn” 或 1 - 開啟規(guī)則
“error” 或 2 - 開啟規(guī)則
如何在老項(xiàng)目中加入ESlint
1. 在目錄中添加.editorconfig、.eslintrc.js、.eslintignore這三個(gè)文件
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ī)則時(shí)只警告(默認(rèn)運(yùn)行出錯(cuò)) // emitWarning: !config.dev.showEslintErrorsInOverlay } }, ] }
4. 重新bulid代碼運(yùn)行,完美生效!!!!!!
推薦三個(gè)VSCode插件
ESLint (只支持高亮顯示js文件)
EditorConfig
Typings(代碼錯(cuò)誤提示)
常見的報(bào)錯(cuò)
文件末尾存在空行(eol-last)
缺少分號(hào)(‘semi': [‘error','always'])
關(guān)鍵字后面缺少空格
字符串沒有使用單引號(hào)('quotes': [1, 'single'])
縮進(jìn)錯(cuò)誤
沒有使用全等(eqeqeq)
導(dǎo)入組件卻沒有使用
new了一個(gè)對(duì)象卻沒有賦值給某個(gè)常量(可以在該實(shí)例前添加此代碼/eslint-disable no-new/忽略ESLint的檢查)
超過一行空白行(no-multiple-empty-lines)
注釋符 // 后面縮進(jìn)錯(cuò)誤(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, // // 防止格式化代碼后單引號(hào)變雙引號(hào) // "prettier.singleQuote": true, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1500, // "git.confirmSync": false // 配置是否從更新通道接收自動(dòng)更新。更改后需要重啟。 "update.channel": "none" }
關(guān)于如何在Vue項(xiàng)目中使用ESLint方法問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
當(dāng)前文章:如何在Vue項(xiàng)目中使用ESLint方法
網(wǎng)頁URL:http://bm7419.com/article38/pssopp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、微信公眾號(hào)、靜態(tài)網(wǎng)站、軟件開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)