Vue3+TS項目中eslint、prettier安裝配置詳細指南
更新時間：2024年07月17日 10:50:19 作者：小遲前端
為了更好的統(tǒng)一項目的代碼風(fēng)格,因此在編寫時就可以使用eslint+prettier,它們不僅能方便代碼編寫,還能避免不必要的錯誤,讓代碼變得更加嚴謹,這篇文章主要給大家介紹了關(guān)于Vue3+TS項目中eslint、prettier安裝配置的相關(guān)資料,需要的朋友可以參考下
前言
eslint和prettier的作用主要為：可以規(guī)范團隊的代碼風(fēng)格。在實際項目中，團隊的每個成員的編碼習(xí)慣都不同，這極有可能造成，一個項目多個代碼風(fēng)格，這會造成代碼閱讀困難，后期維護難度大燈問題，這就需要配置下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
接下來執(zhí)行初始化。
npx eslint --init
接下來會有彈出一些問題，可根據(jù)自身項目情況進行回答，期間會詢問是否需要安裝相應(yīng)插件，y->回車。
2.配置eslintrc
會在項目根目錄下生成.eslintrc.cjs文件，然后對項目進行自己需要的配置
module.exports = {
// 使 eslint 支持 node 與 ES6
env: {
browser: true,
es2021: true,
node: true
},
// 引入推薦的語法校驗規(guī)則
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
overrides: [],
// 這里一定要配置對 先使用vue-eslint-parser 再使用@typescript-eslint/parser
// 先解析 <template> 標簽中的內(nèi)容 然后再解析 vue <script> 標簽中的 TS 代碼
// 選擇使用的解析器
parser: 'vue-eslint-parser',
// 解析器的詳細配置
parserOptions: {
// 使用最新版 ES 語法
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中的啟動命令，這樣便可以執(zhí)行 pnpm run lint:fix 來進行自動格式化代碼。
"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ī)則上有沖突，。比如方法名和后面的括號之間的空格問題。ESLint 規(guī)則是添加空格，Prettier則是不添加空格
此時可以考慮在ESlint配置文件中關(guān)閉相關(guān)檢測規(guī)則。
1、打開 .eslintrc.js 配置文件
2、在 rules 規(guī)則下，新增一條規(guī)則
'space-before-function-paren': 'off'
3、重啟項目
至此，你即可在 VSCode 保存時，自動格式化代碼！
總結(jié)
到此這篇關(guān)于Vue3+TS項目中eslint、prettier安裝配置的文章就介紹到這了,更多相關(guān)eslint、prettier安裝配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在?Vue?的響應(yīng)式系統(tǒng)中,依賴收集是貫穿整個數(shù)據(jù)驅(qū)動視圖的核心環(huán)節(jié),本文將從?Vue?2?的源碼出發(fā),層層拆解依賴收集的完整流程,帶你從?“使用層”?走向?“原理層”,真正理解?Vue?響應(yīng)式的底層邏輯2026-03-03
本篇文章主要介紹了Vue中保存用戶登錄狀態(tài)實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。、2017-06-06
基于Vue3+Node.js實現(xiàn)實時可視化監(jiān)控系統(tǒng)
在日常運維和開發(fā)工作中,服務(wù)器監(jiān)控是必不可少的環(huán)節(jié),市面上有不少優(yōu)秀的監(jiān)控方案,但對于中小型團隊或個人開發(fā)者來說,這些工具往往過于復(fù)雜,學(xué)習(xí)成本較高,本文將介紹我自己開發(fā)的 ServWatch 監(jiān)控系統(tǒng)——一個輕量級、易部署、界面美觀的實時監(jiān)控解決方案2026-02-02
這篇文章主要介紹了Vue-cli3多頁面配置詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了watch里面的deep和immediate作用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了Vue中$on和$emit的實現(xiàn)原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
虛擬列表是一種優(yōu)化長列表渲染的技術(shù),它可以在保持流暢性的同時,渲染大量的數(shù)據(jù),本文主要介紹了如何使用vue手寫一個虛擬列表,感興趣的可以了解下2024-04-04
Vue 實現(xiàn)顯示/隱藏層的思路（加全局點擊事件）
這篇文章主要介紹了Vue 實現(xiàn)顯示/隱藏層的思路（加全局點擊事件）,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue傳值的編碼和解碼方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue click.stop阻止點擊事件繼續(xù)傳播的方法
今天小編就為大家分享一篇vue click.stop阻止點擊事件繼續(xù)傳播的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09