ESLint是一個QA工具，用來避免低級錯誤和統一代碼的風格
ESLint的用途
1.審查代碼是否符合編碼規范和統一的代碼風格；
2.審查代碼是否存在語法錯誤；
中文網地址 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）
規范縮進風格，縮進大小，tab長度以及字符集等,解決不同IDE的編碼范設置。EditorConfig 插件會去查找當前編輯文件的所在文件夾或其上級文件夾中是否有 .editorconfig 文件。如果有，則編輯器的行為會與 .editorconfig 文件中定義的一致，并且其優先級高于編輯器自身的設置。
root = true# 對所有文件有效 //[*js]只對js文件有效[*]#設置編碼格式charset = utf-8#縮進類型 可選space和tabindent_style = space#縮進數量可選整數值2 or 4,或者tabindent_size = 2#換行符的格式end_of_line = lf# 是否在文件的最后插入一個空行 可選true和falseinsert_final_newline = true# 是否刪除行尾的空格 可選擇true和falsetrim_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 }}如何在老項目中加入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插件
常見的報錯
文件末尾存在空行(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"}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
