安裝之后你就可以看到目錄里面有eslint 的配置文件：
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
‘plugin:vue/essential’,
‘standard’
],
parserOptions: {
ecmaVersion: 12,
sourceType: ‘module’
},
plugins: [
‘vue’
],
rules: {
}
}
這里基本上eslint 就可以在項(xiàng)目里生效了，還需要自己風(fēng)格配置和工具配置。
按照自己選項(xiàng)安裝之后，可以發(fā)現(xiàn)安裝了如下依賴：
-
eslint@7.12.1
-
eslint-plugin-node@11.1.0
-
eslint-config-standard@16.0.0 //對(duì)應(yīng)配置項(xiàng)的extends：‘standard’
-
eslint-plugin-import@2.22.1
-
eslint-plugin-vue@7.1.0 //對(duì)應(yīng)配置項(xiàng)的extends：plugin:vue/essential
-
eslint-plugin-promise@4.2.1
除了 eslint-config-standard@16.0.0還有一個(gè)eslint-plugin-vue@7.1.0，
添加這個(gè)插件可以檢查.vue 文件的 template ，同時(shí)該插件提供多種規(guī)則標(biāo)準(zhǔn)集關(guān)于vue3和vue2。建議使用：Recommended，可以規(guī)范template 標(biāo)簽。
ESLint常用配置說明
一個(gè)環(huán)境定義了一組預(yù)定義的全局變量。
| 配置項(xiàng) | 說明 |
| — | — |
| env | 運(yùn)行環(huán)境 |
一個(gè)配置文件可以被基礎(chǔ)配置中的已啟用的規(guī)則繼承。
| 配置項(xiàng) | 說明 |
| — | — |
| extends | 繼承規(guī)則，可繼承規(guī)則集合 |
ESLint 默認(rèn)使用Espree作為其解析器，你可以在配置文件中指定一個(gè)不同的解析器
| 配置項(xiàng) | 說明 |
| — | — |
| parserOptions | 配置制定解析器 |
ESLint 支持使用第三方插件。在使用插件之前，你必須使用 npm 安裝它。
| 配置項(xiàng) | 說明 |
| — | — |
| plugins | 插件 |
一個(gè)環(huán)境定義了一組預(yù)定義的全局變量。
| 配置項(xiàng) | 說明 |
| — | — |
| Processor | 插件可以提供處理器 |
ESLint 附帶有大量的規(guī)則。你可以使用注釋或配置文件修改你項(xiàng)目中要使用的規(guī)則。要改變一個(gè)規(guī)則設(shè)置，你必須將規(guī)則 ID 設(shè)置為下列值之一：
“off” 或 0 - 關(guān)閉規(guī)則
“warn” 或 1 - 開啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出)
“error” 或 2 - 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)
| 配置項(xiàng) | 說明 |
| — | — |
| Rules | 規(guī)則 |
當(dāng)訪問當(dāng)前源文件內(nèi)未定義的變量時(shí)，no-undef 規(guī)則將發(fā)出警告。如果你想在一個(gè)源文件里使用全局變量，推薦你在 ESLint 中定義這些全局變量，這樣 ESLint 就不會(huì)發(fā)出警告了。你可以使用注釋或在配置文件中定義全局變量。
| 配置項(xiàng) | 說明 |
| — | — |
| globals | 全局變量 |
ESLint 規(guī)則說明
我們可以根據(jù)規(guī)則配置，除了extends 規(guī)則集之外的規(guī)則補(bǔ)充。
具體規(guī)則描述查看官網(wǎng)
Rules配置最佳實(shí)踐：
/*
-
@Description:
-
@Autor: ZY
-
@Date: 2020-09-22 11:09:46
-
@LastEditors: ZY
-
@LastEditTime: 2020-10-24 18:14:07
*/
module.exports = {
root: true,
env: {
browser: true,
node: true
},
‘extends’: [
‘plugin:vue/strongly-recommended’, //vue 插件推薦規(guī)則
‘@vue/standard’
],
rules: {
‘eqeqeq’:0,
‘no-console’: ‘off’,
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘error’ : ‘off’,
‘generator-star-spacing’: ‘off’,//強(qiáng)制 generator 函數(shù)中 * 號(hào)周圍使用一致的空格
‘no-mixed-operators’: 0,//禁止混合使用不同的操作符
‘vue/max-attributes-per-line’: [ //屬性換行，和單行多行最大個(gè)數(shù)
2,
{
‘singleline’: 5,
‘multiline’: {
‘max’: 1,
‘a(chǎn)llowFirstLine’: false
}
}
],
‘vue/attribute-hyphenation’: 0, //屬性推薦-間隔，避免駝峰
‘vue/html-self-closing’: 0,
‘vue/component-name-in-template-casing’: 0,
‘vue/html-closing-bracket-spacing’: 0,
‘vue/singleline-html-element-content-newline’: 0,
‘vue/no-unused-components’: 0,
‘vue/multiline-html-element-content-newline’: 0,
‘vue/no-use-v-if-with-v-for’: 0,
‘vue/html-closing-bracket-newline’: 0,
‘vue/no-parsing-error’: 0,
‘no-tabs’: 0,
‘quotes’: [
2,
‘single’,
{
‘a(chǎn)voidEscape’: true,
‘a(chǎn)llowTemplateLiterals’: true
}
],
‘semi’: [
2,
‘never’,
{
‘beforeStatementContinuationChars’: ‘never’
}
],
‘no-delete-var’: 2,
‘prefer-const’: [
2,
{
‘ignoreReadBeforeAssign’: false
}
]
},
parserOptions: {
parser: ‘babel-eslint’
},
overrides: [
{
files: [
‘**/tests/*.{j,t}s?(x)’,
‘/tests/unit//*.spec.{j,t}s?(x)’
],
env: {
jest: true
}
}
]
}
自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過，也去過華為、OPPO等大廠，18年進(jìn)入阿里一直到現(xiàn)在。
深知大多數(shù)前端工程師，想要提升技能，往往是自己摸索成長(zhǎng)或者是報(bào)班學(xué)習(xí)，但對(duì)于培訓(xùn)機(jī)構(gòu)動(dòng)則幾千的學(xué)費(fèi)，著實(shí)壓力不小。自己不成體系的自學(xué)效果低效又漫長(zhǎng)，而且極易碰到天花板技術(shù)停滯不前！
因此收集整理了一份《2024年Web前端開發(fā)全套學(xué)習(xí)資料》，初衷也很簡(jiǎn)單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時(shí)減輕大家的負(fù)擔(dān)。
既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗(yàn)的小伙伴深入學(xué)習(xí)提升的進(jìn)階課程，基本涵蓋了95%以上前端開發(fā)知識(shí)點(diǎn)，真正體系化！
由于文件比較大，這里只是將部分目錄截圖出來，每個(gè)節(jié)點(diǎn)里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實(shí)戰(zhàn)項(xiàng)目、講解視頻，并且會(huì)持續(xù)更新！
如果你覺得這些內(nèi)容對(duì)你有幫助，可以掃碼獲?。。。▊渥ⅲ呵岸耍?/strong>
最后
前端CSS面試題文檔，JavaScript面試題文檔，Vue面試題文檔，大廠面試題文檔，需要的讀者可以戳這里免費(fèi)領(lǐng)取！
…(img-J7T2asU5-1712217141283)]
由于文件比較大，這里只是將部分目錄截圖出來，每個(gè)節(jié)點(diǎn)里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實(shí)戰(zhàn)項(xiàng)目、講解視頻，并且會(huì)持續(xù)更新！
如果你覺得這些內(nèi)容對(duì)你有幫助，可以掃碼獲?。。。▊渥ⅲ呵岸耍?/strong>
最后
前端CSS面試題文檔，JavaScript面試題文檔，Vue面試題文檔，大廠面試題文檔，需要的讀者可以戳這里免費(fèi)領(lǐng)??！
[外鏈圖片轉(zhuǎn)存中…(img-mUvZTZoR-1712217141283)]文章來源：http://www.zghlxwxcb.cn/news/detail-848688.html
[外鏈圖片轉(zhuǎn)存中…(img-kM4ri1Av-1712217141284)]文章來源地址http://www.zghlxwxcb.cn/news/detail-848688.html
到了這里，關(guān)于Vue 項(xiàng)目eslint 配置編程風(fēng)格（VScode）(1)，講的太清楚了的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
