Vue3+TS項(xiàng)目中eslint、prettier安裝配置詳細(xì)指南
前言
eslint和prettier的作用主要為:可以規(guī)范團(tuán)隊(duì)的代碼風(fēng)格。在實(shí)際項(xiàng)目中,團(tuán)隊(duì)的每個(gè)成員的編碼習(xí)慣都不同,這極有可能造成,一個(gè)項(xiàng)目多個(gè)代碼風(fēng)格,這會(huì)造成代碼閱讀困難,后期維護(hù)難度大燈問(wèn)題,這就需要配置下eslint和prettier。
1.eslint
1.安裝依賴
首先我們需要先安裝 @eslint/create-config 插件:
pnpm install -D @eslint/create-config
提示我未安裝eslint,按y,回車安裝
Need to install the following packages: eslint@8.57.0 Ok to proceed? (y) y
接下來(lái)執(zhí)行初始化。
npx eslint --init
接下來(lái)會(huì)有彈出一些問(wèn)題,可根據(jù)自身項(xiàng)目情況進(jìn)行回答,期間會(huì)詢問(wèn)是否需要安裝相應(yīng)插件,y->回車。
2.配置eslintrc
會(huì)在項(xiàng)目根目錄下生成.eslintrc.cjs文件,然后對(duì)項(xiàng)目進(jìn)行自己需要的配置
module.exports = { // 使 eslint 支持 node 與 ES6 env: { browser: true, es2021: true, node: true }, // 引入推薦的語(yǔ)法校驗(yàn)規(guī)則 extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended' ], overrides: [], // 這里一定要配置對(duì) 先使用vue-eslint-parser 再使用@typescript-eslint/parser // 先解析 <template> 標(biāo)簽中的內(nèi)容 然后再解析 vue <script> 標(biāo)簽中的 TS 代碼 // 選擇使用的解析器 parser: 'vue-eslint-parser', // 解析器的詳細(xì)配置 parserOptions: { // 使用最新版 ES 語(yǔ)法 ecmaVersion: 'latest', // 使用 ESLint TS 解析器 parser: '@typescript-eslint/parser', // 使用 ES 模塊化規(guī)范 sourceType: 'module' }, // 使用的插件 plugins: ['vue', '@typescript-eslint'], // 自定義規(guī)則 rules: { '@typescript-eslint/no-unused-vars': 'off', indent: [ 'error', 4, { SwitchCase: 1 } ], 'vue/multi-word-component-names': [ 'error', { ignores: ['index', 'Header'] //需要忽略的組件名 } ], '@typescript-eslint/no-var-requires': 'off', '@typescript-eslint/no-explicit-any': 'off', semi: 'off', '@typescript-eslint/no-this-alias': 'off', 'eslintno-debugger': 'off', 'vue/no-unused-vars': 'off', 'vue/no-template-shadow': 'off', 'vue/require-v-for-key': 'off', 'vue/no-textarea-mustache': 'off', 'vue/no-v-html': 'off' } };
3.配置下忽略文件eslintignore
在根目錄下創(chuàng)建.eslintignore文件,排除一些文件夾
node_modules *.md .vscode .idea dist /public /docs .husky .local /bin Dockerfile .eslintrc.js
4.配置package.json
然后配置下package.json中的啟動(dòng)命令,這樣便可以執(zhí)行 pnpm run lint:fix 來(lái)進(jìn)行自動(dòng)格式化代碼。
"scripts": { "dev": "vite --open", "test": "echo \"Error: no test specified\" && exit 1", "eslint:fix": "eslint --fix" },
2 prettier
1.安裝 prettier 依賴
pnpm install -D prettier
pnpm install -D eslint-config-prettier eslint-plugin-prettier
2.創(chuàng)建.prettierrc.js 文件
module.exports = { "singleQuote": true, "semi": false, "bracketSpacing": true, "htmlWhitespaceSensitivity": "ignore", "endOfLine": "auto", "trailingComma": "all", "tabWidth": 2, "printWidth": 100, "useTabs": false, "bracketSameLine": true, "arrowParens": "always", "vueIndentScriptAndStyle": false, "singleAttributePerLine": false }
3.創(chuàng)建 .prettierignore 文件
dist/ node_modules/ .vscode/ .idea/ /public/* .local **/*.svg **/*.sh
4.配置package.json
{ "scripts": { "lint:prettier": "prettier --write **/*.{js,json,tsx,css,less,scss,vue,html,md}" } }
附:如果ESLint和Prettier在某些規(guī)則上有沖突,。比如方法名和后面的括號(hào)之間的空格問(wèn)題。ESLint 規(guī)則是添加空格,Prettier則是不添加空格
此時(shí)可以考慮在ESlint配置文件中關(guān)閉相關(guān)檢測(cè)規(guī)則。
1、打開(kāi) .eslintrc.js 配置文件
2、在 rules 規(guī)則下,新增一條規(guī)則
'space-before-function-paren': 'off'
3、重啟項(xiàng)目
至此,你即可在 VSCode 保存時(shí),自動(dòng)格式化代碼!
總結(jié)
到此這篇關(guān)于Vue3+TS項(xiàng)目中eslint、prettier安裝配置的文章就介紹到這了,更多相關(guān)eslint、prettier安裝配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue Echarts渲染數(shù)據(jù)導(dǎo)致殘留臟數(shù)據(jù)的問(wèn)題處理
- vue2.0中自適應(yīng)echarts圖表、全屏插件screenfull的使用
- vue3+ts實(shí)現(xiàn)一個(gè)表單組件的詳細(xì)代碼
- vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
- Vue3 Echarts通用的折線圖帶陰影效果實(shí)現(xiàn)
- 在導(dǎo)入.vue文件的時(shí)候,ts報(bào)錯(cuò)提示:找不到模塊“@/Layout/index.vue”或其相應(yīng)的類型聲明問(wèn)題
相關(guān)文章
查找Vue中下標(biāo)的操作(some和findindex)
這篇文章主要介紹了查找Vue中下標(biāo)的操作(some和findindex),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue3?父控件遠(yuǎn)程獲取數(shù)據(jù)在子組件上顯示不出來(lái)的解決方案
這篇文章主要介紹了vue3?父控件遠(yuǎn)程獲取數(shù)據(jù),在子組件上顯示不出來(lái),本文給大家分享兩種解決方案幫助大家解決這個(gè)問(wèn)題,需要的朋友可以參考下2023-08-08vue使用SVG實(shí)現(xiàn)圓形進(jìn)度條音樂(lè)播放
這篇文章主要為大家詳細(xì)介紹了vue使用SVG實(shí)現(xiàn)圓形進(jìn)度條音樂(lè)播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07vue的props實(shí)現(xiàn)子組件隨父組件一起變化
這篇文章主要為大家詳細(xì)介紹了vue的props如何實(shí)現(xiàn)子組件隨父組件一起變化,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10vue2.0如何借用vue-pdf實(shí)現(xiàn)在線預(yù)覽pdf文件
這篇文章主要介紹了vue2.0如何借用vue-pdf實(shí)現(xiàn)在線預(yù)覽pdf文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08vue基于vant實(shí)現(xiàn)上拉加載下拉刷新的示例代碼
普遍存在于各種app中的上拉加載下拉刷新功能,本文主要介紹了vue基于vant實(shí)現(xiàn)上拉加載下拉刷新,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01