亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue2老項(xiàng)目配置ESLint和Prettier完整步驟

 更新時(shí)間:2024年08月14日 10:54:08   作者:扶蘇1002  
ESLint是一個(gè)靜態(tài)代碼分析工具,用于檢查JavaScript代碼的語(yǔ)法結(jié)構(gòu)和查找程序錯(cuò)誤,Prettier是一個(gè)代碼格式化工具,這篇文章主要給大家介紹了關(guān)于Vue2老項(xiàng)目配置ESLint和Prettier的完整步驟,需要的朋友可以參考下

接手一個(gè)老項(xiàng)目Vue2,由VueCli構(gòu)建,需要集成一下ESLint和Prettier,保證代碼規(guī)范

1. 安裝以下插件

  • 安裝的時(shí)候需要指定一下版本號(hào),太新的會(huì)有問(wèn)題
npm install -D eslint@7.32.0 prettier@2.4.1 @babel/eslint-parser@7.12.16 @vue/cli-plugin-eslint@5.0.0 eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0 eslint-plugin-vue@8.0.3

1.1. eslint

用于檢查和標(biāo)示出ECMAScript/JavaScript代碼規(guī)范問(wèn)題工具。

1.2. prettier

Prettier 是一款強(qiáng)大的代碼格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等語(yǔ)言,基本上前端能用到的文件格式它都可以搞定,是當(dāng)下最流行的代碼格式化工具。

1.3. @babel/eslint-parser

簡(jiǎn)而言之就是一個(gè)解析器,允許您使用ESLint對(duì)所有有效的Babel代碼進(jìn)行檢查。

ESLint允許使用自定義解析器,當(dāng)使用此插件時(shí),代碼會(huì)被Babel解析器解析,并且生成的AST被轉(zhuǎn)換成一個(gè)ESLint可以理解的符合ESTree的結(jié)構(gòu),所有的位置信息如行列也會(huì)保留,因此可以輕松的追蹤錯(cuò)誤

1.4. @vue/cli-plugin-eslint

vue-cli的eslint 插件,檢查和修復(fù)文件

1.5. eslint-config-prettier

禁用掉了一些不必要的以及和 Prettier 相沖突的 ESLint 規(guī)則;

1.6. eslint-plugin-prettier

將 prettier 作為 ESLint 的規(guī)則來(lái)使用,相當(dāng)于代碼不符合 Prettier 的標(biāo)準(zhǔn)時(shí),會(huì)報(bào)一個(gè) ESLint 錯(cuò)誤,同時(shí)也可以通過(guò) eslint --fix 來(lái)進(jìn)行格式化;這樣就相當(dāng)于將 Prettier 整合進(jìn)了 ESLint 中;

1.7. eslint-plugin-vue

Vue.js的官方ESLint插件,即使用eslint檢查.vue文件的template和script

1.8. devDependencies如下

2. 項(xiàng)目配置

2.1. 根目錄新建.eslintrc.js

module.exports = {
	root: true, // 在根目錄下尋找.eslintrc.js文件,如果當(dāng)前工作區(qū)打開(kāi)的項(xiàng)目不是在根目錄,則查找.eslintrc.js文件會(huì)失敗,且eslint檢查也不會(huì)生效
	env: {
		node: true
	},
	extends: [
		'plugin:vue/essential',
		'eslint:recommended',
		'plugin:prettier/recommended' // 沖突時(shí)使用prettier的規(guī)則進(jìn)行覆蓋
	],
	parserOptions: {
		parser: '@babel/eslint-parser'
	},
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'vue/multi-word-component-names': 'off', // 不校驗(yàn)組件名
		'vue/no-multiple-template-root': 0, // 不需要使用根元素包裹template的內(nèi)容
		'vue/no-mutating-props': 0, //允許子元素通過(guò)v-model修改父元素傳的props值
		'vue/no-use-v-if-with-v-for': 0, //允許v-if和v-for共存
		'vue/valid-template-root': 0, //允許只有一個(gè)template
		'no-empty': 0 //允許代碼塊為空
	}
};

2.2. 根目錄新建.eslintignore文件

eslintignore用來(lái)告訴ESLint忽略特定的文件或文件夾,不對(duì)它們進(jìn)行代碼檢查的配置文件。通常情況下,你可能會(huì)希望在項(xiàng)目中包含一些不需要被 ESLint 檢查的文件,比如第三方庫(kù)、自動(dòng)生成的文件、測(cè)試文件等。根據(jù)項(xiàng)目自行配置

# docker
docker/
*.sh
node_modules
lib
*.md
*.scss
*.woff
*.ttf
.vscode
.idea
dist
mock
public
bin
build
config
index.html
src/assets

2.3. 根目錄新建.prettierrc.js文件

文件名可以是.prettierrc(JSON格式)也可以是 .prettierrc.js/prettier.config.js(js格式,需要module.exports一個(gè)對(duì)象)這里使用 .prettierrc.js文件進(jìn)行配置

module.exports = {
	printWidth: 80, // 一行最多 80 字符(默認(rèn)80)
	tabWidth: 2, // 每個(gè)tab相當(dāng)于多少個(gè)空格(默認(rèn)2)
	useTabs: true, // 是否使用tab進(jìn)行縮進(jìn)(默認(rèn)false)
	semi: true, // 行尾需要有分號(hào)(默認(rèn)true)
	singleQuote: true, // 使用單引號(hào)(默認(rèn)false)
	quoteProps: 'as-needed', // 對(duì)象的 key 僅在必要時(shí)用引號(hào)
	jsxSingleQuote: false, // jsx 不使用單引號(hào),而使用雙引號(hào)
	trailingComma: 'none', // 多行使用拖尾逗號(hào)(默認(rèn)none)
	bracketSpacing: true, // 在對(duì)象,數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }"(默認(rèn)true)
	jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的結(jié)尾,而不是另起一行(默認(rèn)false)
	htmlWhitespaceSensitivity: 'css', // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
	arrowParens: 'avoid', // 只有一個(gè)參數(shù)的箭頭函數(shù)的參數(shù)是否帶圓括號(hào)(默認(rèn)avoid:添加括號(hào))
	endOfLine: 'auto', // 行尾換行符
};

2.4. 根目錄新建.prettierignore

.prettierignore 文件是用來(lái)告訴 Prettier 忽略特定的文件或文件夾,不對(duì)它們進(jìn)行代碼格式化的配置文件
可根據(jù)項(xiàng)目自行配置

# docker
docker/
*.sh
node_modules
lib
*.md
*.scss
*.woff
*.ttf
.vscode
.idea
dist
mock
public
bin
build
config
index.html
src/assets

2.5. package.json中配置新指令

"scripts": {
  "lint": "vue-cli-service lint",
  "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
  "prettier": "prettier --write .",
},

運(yùn)行npm run lint即可一鍵檢查和修復(fù)了
運(yùn)行npm run lint:eslint即可使用eslint檢查修復(fù)
運(yùn)行npm run lint:prettier即可使用prettier格式化了

3. vscode的配置

3.1. 安裝Eslint 和Prettier

、

3.2. 用戶配置文件settings.json配置保存自動(dòng)修復(fù)代碼

  • 在 vscode 的用戶配置文件settings.json(或者項(xiàng)目中的.vscode/settings.json)中需要加入以下配置,來(lái)控制保存時(shí)候就可以修復(fù)代碼
{
  /* eslint配置 */
  "eslint.enable": true, // 是否開(kāi)啟eslint
  "eslint.alwaysShowStatus": true, // 底部eslint狀態(tài)欄顯示
  // code代碼保存時(shí),自動(dòng)eslint修復(fù)
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "vue-html"]
}

4. 如何關(guān)閉lint

  • vue.config.js中配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 關(guān)閉lint
  lintOnSave: false
})

總結(jié) 

到此這篇關(guān)于Vue2老項(xiàng)目配置ESLint和Prettier的文章就介紹到這了,更多相關(guān)Vue2配置ESLint和Prettier內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)

    vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)

    Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡(jiǎn)單且高效的方式來(lái)構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見(jiàn)的需求,下面我們就來(lái)學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧
    2023-10-10
  • vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問(wèn)題解決方案

    vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問(wèn)題解決方案

    這篇文章主要介紹了vue2+elementui的el-table固定列會(huì)遮住橫向滾動(dòng)條及錯(cuò)位問(wèn)題解決方案,主要解決固定列錯(cuò)位后, 接下來(lái)就是把固定列往上提滾動(dòng)條的高度就不會(huì)影響了,需要的朋友可以參考下
    2024-01-01
  • vue開(kāi)發(fā)中的base和publicPath的區(qū)別

    vue開(kāi)發(fā)中的base和publicPath的區(qū)別

    本文主要介紹了vue開(kāi)發(fā)中的base和publicPath的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2024-07-07
  • Vue3使用src動(dòng)態(tài)引入本地圖片的詳細(xì)步驟

    Vue3使用src動(dòng)態(tài)引入本地圖片的詳細(xì)步驟

    這篇文章主要給大家介紹了關(guān)于Vue3使用src動(dòng)態(tài)引入本地圖片的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-12-12
  • 解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題

    解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題

    這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08
  • Vite使用報(bào)錯(cuò)解決方法合集

    Vite使用報(bào)錯(cuò)解決方法合集

    這篇文章主要給大家介紹了關(guān)于Vite使用報(bào)錯(cuò)解決方法的相關(guān)資料,這篇文中通過(guò)圖文以及代碼將遇到的一些報(bào)錯(cuò)介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vite具有一定的借鑒價(jià)值,需要的朋友可以參考下
    2023-08-08
  • vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼代碼示例

    vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼代碼示例

    現(xiàn)在我們管理后臺(tái)有個(gè)需求,就是登錄頁(yè)面需要獲取驗(yàn)證碼,用戶可以輸入驗(yàn)證碼后進(jìn)行登錄,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)login頁(yè)登陸驗(yàn)證碼的相關(guān)資料,需要的朋友可以參考下
    2024-05-05
  • Vue中動(dòng)態(tài)添加ref的方法詳解

    Vue中動(dòng)態(tài)添加ref的方法詳解

    在Vue.js項(xiàng)目中,ref是一個(gè)非常有用的功能,它可以用來(lái)獲取DOM元素或子組件的實(shí)例引用,通過(guò)ref,我們可以在父組件中直接操作子組件的方法和屬性,或者對(duì)DOM元素進(jìn)行直接操作,本文將詳細(xì)介紹如何在Vue中動(dòng)態(tài)添加ref,并通過(guò)多個(gè)具體的代碼示例來(lái)幫助讀者理解其實(shí)現(xiàn)過(guò)程
    2024-10-10
  • Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫(huà)的示例

    Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫(huà)的示例

    這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫(huà)的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • 淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式

    淺析Proxy如何實(shí)現(xiàn)Vue響應(yīng)式

    這篇文章主要是來(lái)和大家探討一下,Vue的響應(yīng)式系統(tǒng)僅僅是一個(gè)Proxy嗎,本文將圍繞此問(wèn)題探索一下Proxy是如何實(shí)現(xiàn)Vue響應(yīng)式的,感興趣的小伙伴可以了解一下
    2023-08-08

最新評(píng)論