VSCode编辑器
重要通知
Help -> Toggle Developer Tools，即可像浏览器一样打开VSCode的代码查看功能。
基本概况
保持所有开发者安装了相同的插件和相同的配置，保持开发环境一致性。
- 官网：https://code.visualstudio.com/
- GitHub：<>
用户区配置
- Windows %APPDATA%\Code\User\settings.json
- macOS $HOME/Library/Application\ Support/Code/User/settings.json
- Linux $HOME/.config/Code/User/settings.json
工作区配置
├─ .vscode
│ ├─ extensions.json
│ └─ settings.json
推荐默认插件
代码运行：Code Runner
代码提交者跟踪：GitLens — Git supercharged
HTML/CSS/JavaScript 自动补全：HTML/CSS/JavaScript Snippets
Prettier - Code formatter
HTML CSS Support
ESLint
CSScomb
CSS属性自动排序
{
// CSS属性自动排序
"csscomb.formatOnSave": true
}
JSON Organizer
Vue生态技术栈插件
Vue3
- Vue Language Features (Volar)
React生态技术栈插件
插件列表
- GitHub Copilot
GitHub Copilot 扩展是一个 AI 对程序员工具，可帮助您更快、更智能地编写代码。可以使用 VS Code 中的 Copilot 扩展来生成代码，从它生成的代码中学习，甚至配置编辑器。
extensions.json
扩展VSCode编辑器，增加插件，在项目根目录创建.vscode目录，并且在该目录下创建extensions.json文件
推荐配置
{
"recommendations": [
"Vue.volar",
"Vue.vscode-typescript-vue-plugin",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"eamodio.gitlens"
]
}
配置文档
{
"recommendations": []
}
settings.json
配置VScode编辑器选项，在项目根目录创建.vscode目录，并且在该目录下创建settings.json文件。
设置优先级
不同的设置范围可以在多个级别覆盖配置。在以下列表中，更高范围将覆盖早期范围。
- 默认设置：此范围表示默认的未配置设置值。
- 用户设置：全局应用于所有 VS Code 实例。
- 远程设置：应用于用户打开的远程计算机。
- 工作区设置：应用于打开的文件夹或工作区。
- 工作区文件夹设置：应用于多根工作区的特定文件夹。
- 特定于语言的默认设置：这些是特定于语言的默认值，可由扩展提供。
- 特定于语言的用户设置：与用户设置相同，但特定于语言。
- 特定于语言的远程设置：与远程设置相同，但特定于语言。
- 特定于语言的工作区设置：与工作区设置相同，但特定于语言。
- 特定于语言的工作区文件夹设置：与工作区文件夹设置相同，但特定于语言。
- 策略设置：由系统管理员设置，这些值始终覆盖其他设置值。
推荐配置
{
"editor.fontSize": 12,
"editor.wordWrap": "on",
"editor.tabSize": 2,
"eslint.enable": true,
"eslint.debug": true,
"eslint.run": "onSave",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"[html]": {},
"[css]": {},
"[javascript]": {
"editor.showUnused": false // 在 JavaScript 中禁用未使用代码
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.wordWrap": "on",
"editor.formatOnSave": false
},
"css.validate": true,
"less.validate": true,
"scss.validate": true,
"workbench.colorCustomizations": {},
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/logs": true,
"**/node_modules": true,
"**/bower_components": true,
"cli/target/**": true,
".build/**": true,
"out/**": true,
"out-build/**": true,
"out-vscode/**": true,
"i18n/**": true,
"extensions/**/dist/**": true,
"extensions/**/out/**": true,
"test/smoke/out/**": true,
"test/automation/out/**": true,
"test/integration/browser/out/**": true,
"src/vs/base/test/common/filters.perf.data.js": true,
"src/vs/base/test/node/uri.test.data.txt": true,
"src/vs/workbench/api/test/browser/extHostDocumentData.test.perf-data.ts": true,
"src/vs/editor/test/node/diffing/fixtures/**": true
},
// 这些文件将不会显示在工作空间中
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/node_modules": true,
".git": true,
".build": true,
".profile-oss": true,
".vscode-test": true,
"cli/target": true,
"build/**/*.js": {
"when": "$(basename).ts" // ts编译后生成的js文件将不会显示在工作空中
}
}
}
配置文档
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.fontSize": 12, // 字体
"editor.wordWrap": "on", // 换行
"editor.tabSize": 2, // Tab空格
"eslint.enable": true,
"eslint.debug": true,
"eslint.run": "onSave",
"files.autoSave": "onFocusChange", // 失去焦点后自动保存，"afterDelay"
"npm.packageManager": "yarn",
// 保存时的代码操作
"editor.formatOnSave": true, // 保存时自动格式化
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll": true, // 保存时自动修复在一轮中计算所有可能的修复（对于包括 ESLint 在内的所有提供程序）
"source.fixAll.eslint": true, // 自动修复仅适用于 ESLint
"source.fixAll.stylelint": true
},
/**
* 文件类型自定义编辑器
* 例如html、typescript、markdown
*/
"[html]": {},
"[css]": {},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features",
"editor.formatOnSave": true,
"editor.showUnused": false // 在 JavaScript 中禁用未使用代码
},
"[vue]": {
"editor.defaultFormatter": "Vue.volar",
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.wordWrap": "on",
"editor.formatOnSave": false
},
// 校验
"css.validate": true,
"less.validate": true,
"scss.validate": true,
// 工作空间设置
"workbench.colorCustomizations": {},
// 在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/logs": true,
"**/node_modules": true,
"**/bower_components": true,
"cli/target/**": true,
".build/**": true,
"out/**": true,
"out-build/**": true,
"out-vscode/**": true,
"i18n/**": true,
"extensions/**/dist/**": true,
"extensions/**/out/**": true,
"test/smoke/out/**": true,
"test/automation/out/**": true,
"test/integration/browser/out/**": true,
"src/vs/base/test/common/filters.perf.data.js": true,
"src/vs/base/test/node/uri.test.data.txt": true,
"src/vs/workbench/api/test/browser/extHostDocumentData.test.perf-data.ts": true,
"src/vs/editor/test/node/diffing/fixtures/**": true,
},
// 这些文件将不会显示在工作空间中
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/node_modules": true,
".git": true,
".build": true,
".profile-oss": true,
".vscode-test": true,
"cli/target": true,
"build/**/*.js": {
"when": "$(basename).ts" // ts编译后生成的js文件将不会显示在工作空中
}
}
}
.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
package.json
{
"scripts": {
"dev": "vite",
"build-": "vite build",
"build": "run-p type-check build-only",
"preview": "vite preview",
"test:unit": "vitest --environment jsdom --root src/",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
}
}