VSCode 插件
Prettier
Prettier · Opinionated Code Formatter 是一款专业的代码格式化工具。它支持特别多的语言，诸如：JavaScript、JSX、Angular、Vue 等。
Prettier - Code formatter VSCode 插件能使我们不用通过 npm i -D prettier 便可使用。不过想要很好的使用插件我们需要对其进行配置。
{
// 编辑器默认的格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
// jsx 使用单引号包裹字符串
"prettier.jsxSingleQuote": true,
// js 使用单引号包裹字符串
"prettier.singleQuote": true,
// vue 的 script 和 style 标签内部缩进
"prettier.vueIndentScriptAndStyle": false,
// 尽可能控制尾随逗号的输出
"prettier.trailingComma": "all",
// 当箭头函数只有一个参数的时候加小括号包裹
"prettier.arrowParens": "always",
// 使用 LF 换行符
"prettier.endOfLine": "lf",
// js 对象的 key 是否使用引号包裹，仅在必要的时候，如：{ "unread-count": 12 }
"prettier.quoteProps": "as-needed",
// 指定代码的最佳长度，如果超出限制自动则换行
"prettier.printWidth": 120,
// 是否在行尾添加分号
"prettier.semi": true,
// 一个 tab 缩进的长度
"prettier.tabWidth": 2,
// 使用空格缩进
"prettier.useTabs": false,
// 大括号内部前后加空格
"prettier.bracketSpacing": true,
// 是否格式化引入的代码块
"prettier.embeddedLanguageFormatting": "auto",
// .js 文件的独立配置
"[javascript]": {
// 默认使用 Prettier 进行格式化代码
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 在保存文件的同时格式化文件
"editor.formatOnSave": true,
// 使用 2 个空格进行缩进
"editor.tabSize": 2,
"editor.insertSpaces": true,
// 是否使用连字符，需要字体支持，如 Fira Code
"editor.fontLigatures": true,
"editor.fontFamily": "'Fira Code', Hack, monospace"
},
// .html 文件的独立配置
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false,
"editor.tabSize": 2,
"editor.insertSpaces": true
},
// .css 文件的独立配置
"[css]": {
"editor.tabSize": 2,
"editor.formatOnSave": false,
"editor.insertSpaces": true
},
// .json 文件的独立配置
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.insertSpaces": true
},
// .json (with comment) 文件的独立配置
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// .vue 文件的独立配置
"[vue]": {
"editor.formatOnSave": true,
"editor.tabSize": 2,
"editor.insertSpaces": true,
// 使用 Vetur 插件格式化
"editor.defaultFormatter": "octref.vetur"
},
// .stylus 文件的独立配置
"[stylus]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"gitlens.codeLens.scopes": [
"document"
]
}
}
ESLint
ESLint - Pluggable JavaScript linter 是专业的语法检查工具。它可以先指定一套规则，然后利用此规则来限定某些语法的使用。如：禁止使用 var 声明变量，这时 var foo = 1 就无法通过 ESLint 检查。ESLint VSCode 插件的作用是高亮出不符合限定规则的代码。项目中想要真正的使用 ESLint 还是需要使用 npm i -D eslint 进行安装。
我编写了一套规则上传到了 Github。大家如果想要尝试，可以通过 npm 进行安装：
npm i -D @netiler/eslint-config-netiler
然后配置 .eslintrc.js ：
module.exports = {
extend: ['@netiler/netiler']
}
针对 Vue2：
module.exports = {
extend: ['@netiler/netiler', '@netiler/netiler/vue']
}
针对 Vue3：
module.exports = {
extend: ['@netiler/netiler', '@netiler/netiler/vue3']
}
Vetur
Vetur 是 Vue 的官方插件，主要作用于 Vue2，使用 Vue3 的小伙伴可以安装 Volar 插件。
下面是我的 Vetur VSCode 插件配置：
{
// template 标签不使用代码格式化工具（PS：找不到合适的插件，大部分插件格式化工具都会出现标签换行的问题）
"vetur.format.defaultFormatter.html": "none",
// script 标签内部使用 prettier 进行格式化
"vetur.format.defaultFormatter.js": "prettier",
// 格式化工具针对 vetur 的一些配置项
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "all",
"vueIndentScriptAndStyle": false,
"arrowParens": "always",
"endOfLine": "lf",
"quoteProps": "as-needed",
"printWidth": 120,
"semi": true,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"embeddedLanguageFormatting": "auto"
}
}
}
