VsCode 插件配置安裝
-
安裝插件 Vue Language Features (Volar)
-
安裝 Eslint
-
安裝 Prettier
注意：禁用或卸載 Vetur
需要配置的文件
- 在 Vscode 項(xiàng)目根目錄下：
.vscode/extensions.json
{
"recommendations": [
"johnsoncodehk.volar",
"johnsoncodehk.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint"
],
}
- 對(duì)項(xiàng)目工作區(qū)單獨(dú)設(shè)置 .vscode/settings.json
{
// eslint 保存格式化
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"extensions": [".js", ".ts", ".jsx", ".tsx", ".vue"]
},
// 編輯器保存格式化
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
// .ts 文件格式化程序
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// .vue 文件格式化程序
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 操作時(shí)作為單詞分隔符的字符
"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
// 一個(gè)制表符等于的空格數(shù)
"editor.tabSize": 2,
// 行尾字符
"files.eol": "\n",
// 保存到額時(shí)候用使用 prettier進(jìn)行格式化
"editor.formatOnSave": true,
// // 不要有分號(hào)
// "prettier.semi": false,
// // 使用單引號(hào)
// "prettier.singleQuote": true,
// // 默認(rèn)使用prittier作為格式化工具
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// // 一行的字符數(shù)颁井，如果超過會(huì)進(jìn)行換行，默認(rèn)為80
// "prettier.printWidth": 200,
// // 尾隨逗號(hào)問題逞敷，設(shè)置為none 不顯示 逗號(hào)
// "prettier.trailingComma": "none"
}
- 在項(xiàng)目的根目錄下新建 .prettierrc 文件
{
"semi": false,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "none"
}
● semi：語句末尾是否要加分號(hào)惕蹄，默認(rèn)值 true蚯涮，選擇 false 表示不加
● singleQuote：使用單引號(hào)還是雙引號(hào)，選擇 true卖陵，使用單引號(hào)
● useTabs：使用 tab 縮進(jìn)還是空格縮進(jìn)遭顶，選擇 false
● tabWidth：tab 是空格的情況下，是幾個(gè)空格赶促，選擇 2 個(gè)
● printWidth：當(dāng)行字符的長(zhǎng)度液肌，推薦 80，也有人喜歡 100 或者 120
● trailingComma：在多行輸入的尾逗號(hào)是否添加鸥滨，設(shè)置為 none
- 在項(xiàng)目的根目錄下新建 .prettierignore 忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
- 在 .eslintrc.cjs 文件中配置規(guī)則，關(guān)閉 prettier 的警告
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
...
rules: {
"prettier/prettier": "off",
}
}
