如何在Vue項(xiàng)目中使用ESLint方法？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

專(zhuān)業(yè)從事企業(yè)網(wǎng)站建設(shè)和網(wǎng)站設(shè)計(jì)服務(wù)，包括網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)絡(luò)空間、企業(yè)郵箱、微信公眾號(hào)開(kāi)發(fā)、微信支付寶微信平臺(tái)小程序開(kāi)發(fā)、app軟件開(kāi)發(fā)公司、軟件開(kāi)發(fā)、等服務(wù)。公司始終通過(guò)不懈的努力和以更高的目標(biāo)來(lái)要求自己,在不斷完善自身管理模式和提高技術(shù)研發(fā)能力的同時(shí)，大力倡導(dǎo)推行新經(jīng)濟(jì)品牌戰(zhàn)略，促進(jìn)互聯(lián)網(wǎng)事業(yè)的發(fā)展。

ESLint是一個(gè)QA工具，用來(lái)避免低級(jí)錯(cuò)誤和統(tǒng)一代碼的風(fēng)格

ESLint的用途

1.審查代碼是否符合編碼規(guī)范和統(tǒng)一的代碼風(fēng)格；

2.審查代碼是否存在語(yǔ)法錯(cuò)誤；

中文網(wǎng)地址 http://eslint.cn/

使用VSCode編譯器在Vue項(xiàng)目中的使用

在初始化項(xiàng)目時(shí)選擇是否使用

ESLint管理代碼(選擇Y則默認(rèn)開(kāi)啟)

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長(zhǎng)度以及字符集等,解決不同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)類(lèi)型 可選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 文件(用來(lái)配置ESLint的檢查規(guī)則)

module.exports = {
  //此項(xiàng)是用來(lái)告訴eslint找當(dāng)前配置文件不能往父級(jí)查找
  root: true, 
  //此項(xiàng)是用來(lái)指定eslint解析器的，解析器必須符合規(guī)則，babel-eslint解析器是對(duì)babel解析器的包裝使其與ESLint解析
  parser: 'babel-eslint',
  //此項(xiàng)是用來(lái)指定javaScript語(yǔ)言類(lèi)型和風(fēng)格，sourceType用來(lái)指定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)是用來(lái)配置標(biāo)準(zhǔn)的js風(fēng)格，就是說(shuō)寫(xiě)代碼的時(shí)候要規(guī)范的寫(xiě)，如果你使用vs-code我覺(jué)得應(yīng)該可以避免出錯(cuò)
  extends: 'standard',
  // required to lint *.vue files
  // 此項(xiàng)是用來(lái)提供插件的，插件名稱(chēng)省略了eslint-plugin-，下面這個(gè)配置是用來(lái)規(guī)范html的
  plugins: [
    'html'
  ],
  // add your custom rules here
  // 下面這些rules是用來(lái)設(shè)置從插件來(lái)的規(guī)范代碼的規(guī)則，使用必須去掉前綴eslint-plugin-
  // 主要有如下的設(shè)置規(guī)則，可以設(shè)置字符串也可以設(shè)置數(shù)字，兩者效果一致
  // "off" -> 0 關(guān)閉規(guī)則
  // "warn" -> 1 開(kāi)啟警告規(guī)則
  //"error" -> 2 開(kāi)啟錯(cuò)誤規(guī)則
  // 了解了上面這些，下面這些代碼相信也看的明白了
 rules: {
  // allow async-await
  'generator-star-spacing': 'off',
  // allow debugger during development
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  // js語(yǔ)句結(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)類(lèi)型
  "quotes": [0, "single"],
  // 禁止出現(xiàn)未使用過(guò)的變量
  // 'no-unused-vars': 0,
  // 要求或禁止末尾逗號(hào)
  'comma-dangle': 0
 }
}

• “off” 或 0 - 關(guān)閉規(guī)則

• “warn” 或 1 - 開(kāi)啟規(guī)則

• “error” 或 2 - 開(kāi)啟規(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ò)誤提示)

常見(jiàn)的報(bào)錯(cuò)

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

缺少分號(hào)(‘semi': [‘error','always'])

關(guān)鍵字后面缺少空格

字符串沒(méi)有使用單引號(hào)('quotes': [1, 'single'])

縮進(jìn)錯(cuò)誤

沒(méi)有使用全等(eqeqeq)

導(dǎo)入組件卻沒(méi)有使用

new了一個(gè)對(duì)象卻沒(méi)有賦值給某個(gè)常量(可以在該實(shí)例前添加此代碼/eslint-disable no-new/忽略ESLint的檢查)

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

注釋符 // 后面縮進(jìn)錯(cuò)誤(lines-around-comment)

VScode

用戶(hù)配置

{
  "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方法問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：如何在Vue項(xiàng)目中使用ESLint方法-創(chuàng)新互聯(lián)
URL分享：http://chinadenli.net/article0/dgppio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、外貿(mào)建站、網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)