vue3+ts+EsLint+Prettier規範程式碼的方法實現
阿新 • • 發佈：2021-10-26
目錄
- 使用
- EsLint的使用
- 新增配置檔案
- Prettier的使用
- 使用husky和lint-staged構建程式碼
- 增加setting.on配置
- 參考資料
本文主要介紹在3中使用TypeScript做開發時，如何安裝與配置EsLint和Prettier，以提高編碼規範。
（1）EsLint 提供編碼規範；
（2）Prettier 是一個 Opinionated 的程式碼格式化工具。
使用
EsLint的使用
安裝依賴
npm i -D eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin
這四個依賴分別是：
- - `eslint`: EsLint的核心程式碼
- - `eslint-plugin-vue`：[為Vue使用Eslint的外掛](https://eslint.vuejs.org/)
- - `@typescript-eslint/parser`：ESLint的解析器，用於解析typescript，從而檢查和規範Typescript程式碼
- - `@typescript-eslint/eslint-plugin`：這是一個ESLint外掛，包含了各類定義好的檢測Typescript程式碼的規範
新增配置檔案
npx eslint --init
根目錄下增加.eslintrc.js檔案。（建議選擇js檔案，json不可以寫註釋） 修改配置檔案
主要是修改rules中的相關配置，具體可檢視官方配置
/*!
* https://eslint.boot.com/docs/rules/
* https://eslint.vuejs.org/rules/
*
* - 0: off
* - 1: warn
* - 2: error
*/
module.exports = {
root: true,env: {
browser: true,node: true,es6: true
},parser: 'vue-eslint-parser',parserOptions: {
parser: '@typescript-eslint/parser',ecmaVersion: 2020,sourceType: 'module',jsxPragma: 'React',ecmaFeatures: {
jsx: true
}
},globals: {
AMap: false,AMapUI: false
},extends: [
'plugin:vue/vue3-recommended','plugin:@typescript-eslint/recommended'www.cppcns.com
Prettier的使用
安裝依賴
npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier
這三個依賴分別是：
- - `prettier`：prettier外掛的核心程式碼
- - `eslint-config-prettier`：解決ESLint中的樣式規範和prettier中樣式規範的衝突，以prettier的樣式規範為準，使ESLint中的樣式規範自動失效
- - `eslint-plugin-prettier`：將prettier作為ESLint規範來使用
新增配置檔案
在專案的根目錄下建立`.prettierrc.js`檔案，並新增如下配置
module.exports = {
printWidth: 120,// 換行字串閾值
tabWidth: 2,// 設定工具每一個水平縮排的空格數
useTabs: false,semi: false,// 句末是否加分號
vueIndentScriptAndStyle: true,singleQuote: true,// 用單引號
trailingComma: 'none',// 最後一個物件元素加逗號
bracketSpacing: true,// 物件，陣列加空格
jsxBracketSameLine: true,// jsx > 是否另起一行
arrowParens: 'always',// (x) => {} 是否要有小括號
requirePragma: false,// 不需要寫檔案開頭的 @prettier
insertPragma: false // 不需要自動在檔案開頭插入 @prettier
}
將Prettier新增到EsLint中
修改`.eslintrc.js`檔案，在extends中增加
'prettier','plugin:prettier/recommended'
其中：
- - `prettier/@typescript-eslint`：使得@typescript-eslint中的樣式規範失效，遵循prettier中的樣式規範
- - `plugin:prettier/recommended`：使用prettier中的樣式規範，且如果使得ESLint會檢測prettier的格式問題，同樣將格式問題以error的形式丟擲
使用husky和lint-staged構建程式碼
安裝依賴
npm i --save-dev husky lint-staged
修改package.json
新增以下程式碼
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},"lint-staged": {
"src*/**/*.ts": [
"prettier --config .prettwww.cppcns.comierrc.js --write","eslint","git add"
],"src*/**/*.json": [
"prettier --config .prettierrc.js --write","git add"
]
}
這樣，在執行git commit時，EsLint會檢查提交的程式碼。
增加setting.json配置
在.vscode資料夾中增加`setting.json`配置檔案，用於自動儲存時，自動修復及檢驗程式碼。
{
"typescript.tsdk": "./node_modules/typescript/lib","typescript.enablePromptUseWorkspaceTsdk": true,"volar.tsPlugin": true,"volar.tsPluginStatus": false,//===========================================
//============= Editor ======================
//===========================================
"explorer.openEditors.visible": 0,"editor.tabSize": 2,"editor.defaultFormatter": "esbenp.prettier-vscode","diffEditor.ignoreTrimWhitespace": false,//===========================================
//============= Other =======================
//===========================================
"breadcrumbs.enabled": true,"open-in-browser.default": "chrome",//===========================================
//============= files =======================
//===========================================
"files.eol": "\n","search.exclude": {
"**/node_modules": true,"**/*.log": true,"**/*.log*": true,"**/bower_components": true,"**/dist": true,"**/elehukouben": true,"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"out": true,"dist": true,"node_modules": true,"CHANGELOG.md": true,"examples": true,"res": true,"screenshots": true,"yarn-error.log": true,"**/.yarn": true
},"files.exclude": {
"**/.cache": true,"**/.editorconfig": true,"**/.eslintcache": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true
},"files.watcherExclude": {
"**/.git/objects/**": true,"**/.git/subtree-cache/**": true,"**/.vscode/**": true,"**/node_modules/**": true,"**/tmp/**": true,"**/bower_components/**": true,"**/dist/**": true,"**/yarn.lock": true
},"stylelint.enable": true,"stylelint.packageManager": "yarn","liveServer.settings.donotShowInfoMsg": true,"telemetry.enableCrashReporter": false,"workbench.settings.enableNaturalLanguageSearch": false,"path-intellisense.mappings": {
"/@/": "${workspaceRoot}/src"
},"prettier.requireConfig": true,"typescript.updateImportsOnFileMove.enabled": "always","workbench.sideBar.location": "left","[react]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},"[vue]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": false
}
},"cSpell.words": [
"vben","windi","browserslist","tailwindcss","esnext","antv","tinymce","qrcode","sider","pinia","nprogress"
]
}
參考資料
Prettier官網
EsLint官網
EsLint Rules
Prettier看這一篇就行了
使用EsLint+Prettier規範TypeScript程式碼
到此這篇關於vue3+ts+EsLint+Prettier規範程式碼的方法實現的文章就介紹到這了,更多相關vue3 ts 規範程式碼內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！