VsCode 插件配置安装
-
安装插件 Vue Language Features (Volar)
-
安装 Eslint
-
安装 Prettier
注意：禁用或卸载 Vetur
需要配置的文件
- 在 Vscode 项目根目录下：
.vscode/extensions.json
{
"recommendations": [
"johnsoncodehk.volar",
"johnsoncodehk.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint"
],
}
- 对项目工作区单独设置 .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"
},
// 操作时作为单词分隔符的字符
"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
// 一个制表符等于的空格数
"editor.tabSize": 2,
// 行尾字符
"files.eol": "\n",
// 保存到额时候用使用 prettier进行格式化
"editor.formatOnSave": true,
// // 不要有分号
// "prettier.semi": false,
// // 使用单引号
// "prettier.singleQuote": true,
// // 默认使用prittier作为格式化工具
// "editor.defaultFormatter": "esbenp.prettier-vscode",
// // 一行的字符数，如果超过会进行换行，默认为80
// "prettier.printWidth": 200,
// // 尾随逗号问题，设置为none 不显示 逗号
// "prettier.trailingComma": "none"
}
- 在项目的根目录下新建 .prettierrc 文件
{
"semi": false,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"trailingComma": "none"
}
● semi：语句末尾是否要加分号，默认值 true，选择 false 表示不加
● singleQuote：使用单引号还是双引号，选择 true，使用单引号
● useTabs：使用 tab 缩进还是空格缩进，选择 false
● tabWidth：tab 是空格的情况下，是几个空格，选择 2 个
● printWidth：当行字符的长度，推荐 80，也有人喜欢 100 或者 120
● trailingComma：在多行输入的尾逗号是否添加，设置为 none
- 在项目的根目录下新建 .prettierignore 忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
- 在 .eslintrc.cjs 文件中配置规则，关闭 prettier 的警告
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
...
rules: {
"prettier/prettier": "off",
}
}
