常用插件
react 插件
ES7+ React/Redux/React-Native snippets ：该插件提供了许多速记前缀来加速开发并帮助开发人员为 React、Redux、GraphQL 和 React Native 创建代码片段和语法。
VSCode React Refactor: 这是一个专门为 React 开发人员设计的 VS Code 扩展。 在处理大型项目时，重构可能很有挑战性。 可以使用 VSCode React Refactor 快速重构代码，它会将 JSX 代码片段提取到新的类、组件中。 此外，它还支持 TypeScript、TSX、常规函数、类和箭头函数。
Simple React Snippets: 该插件提供了一组精心挑选的 React 代码片段，可以通过输入几个字母轻松地将其添加到代码中。 例如，输入 imr 会将 React 导入到组件中。
Typescript React Code Snippets: 此插件包含了使用 Typescript 的 React 代码片段，它支持 Typescript(.ts) 或 TypeScript React (.tsx) 等语言。
React Native Tools： React Native Tools 扩展由 Microsoft 团队构建，它为 React Native 项目提供了一个开发环境。该插件允许在不同的模拟器或仿真器上轻松运行和调试代码，从命令面板快速运行 react-native 命令，而无需在终端中手动运行命令，并使用 IntelliSense 浏览 React Native 的函数、对象和参数等。
vue 插件
Vue Language Features (Volar)：使用该插件可以获得漂亮的语法高亮显示、错误检查和代码格式化。并且，它还添加了很多 Vue 指令和事件处理程序，在输入时提供很好的建议。
Vue 3 Snippets：这个插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。
Vue VSCode Snippets：此插件将 Vue 2 Snippets 和 Vue 3 Snippets 添加到 Visual Studio Code 中。
-JavaScript (ES6) code snippets：通过此插件可以使用预定义的 ES6 语法片段速记，从而提高开发效率。这个 VS Code 插件可以自定义，因为它不特定于任何框架。
项目插件
DotENV ：env 文件
EditorConfig for VS Code： 编码格式
ESLint
Live Server
Markdown All in One
Prettier- Code formatter
Project Manager
Tailwind CSS IntelliSense
WindiCSS IntelliSense
TypeScript Vue Plugin(Volar)
Console Ninja
Database Client
Docker
git-commit-plugin
Remote-SSH
Stylelint
Vetur
YAML
Vim
stylelint-plus
Git 集成
GitLens：该插件增强了 VS Code 中的 Git，并从每个存储库中释放隐藏数据。可以快速查看代码的编写者、轻松导航和探索 Git 存储库、通过丰富的可视化效果和强大的比较命令获取有效信息，以及执行更多操作，帮助我们更好地理解代码。
Git History：该插件用于查看 Git 日志和文件历史记录并比较分支或提交。
Git Graph： Git Graph 插件用于可视化查看存储库的 Git 操作，并从图形中轻松执行 Git 操作。
数据分析
Import Cost 在项目中导入多个包时可能会出现性能问题，Import Cost 就用于查看将特定库导入项目的成本。该插件会显示导入库的大小，如果大小为绿色，则表示库很小，而红色表示库很大。
Time Master 从编程活动中自动生成的指标、见解和时间跟踪。它是一个开源项目，独立于网络环境，安全轻量。
功能强化
npm Intellisense 该插件为 import 语句中的 npm 模块提供了自动完成功能。 npm 模块的所有导入都会使用此扩展自动处理。
Path intellisense 该插件用于自动补全文件名。当 import 其它文件时，能够对文件进行提示，快速补全要引入的文件名。
Auto Rename Tag 使用该插件，可以在重命名一个 HTML 标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。
Auto Close Tag 通常想要使用一个特定的 HTML 元素时，需要输入开始标签和结束标签。使用该插件后，只需要输入开始标签，它就会自动添加结束标签。对于 Vue 开发人员来说，它还支持自定义类型名称。当输入自定义组件的开始标签时，它会自动添加结束标签。
CSS Peek 使用该插件，可以直接从 HTML 和 JavaScript 文件快速导航和编辑外部样式表中定义的 CSS 样式。它提供了一个“Peek”功能，在 HTML 中选择某个 class 或者 id 名称按住 Ctrl 键+鼠标左键可以直接定位到该名称的 CSS 的位置。
Regex Previewer Regex Previewer 用于测试正则表达式。在编写正则表达式时，可以直接使用快捷键 Ctrl+Alt+M （windows）或者 ⌥+⌘+M（Mac）在编辑器右侧启动一个标签页，可以在这个标签页写一些正则表达式测试用例，写完之后，点击正则表达式上方的 Test Regex...，这时右侧标签页匹配到字符就会高亮显示：
Code Spell Checker Code Spell Checker 插件可以检查单词拼写是否出现错误，检查的规则遵循 camelCase （驼峰拼写法）。
编程美化
Todo Tree
TODO Highlight 如果想在将代码发布到生产环境之前提醒自己注意事项或代码中未完成的事情，TODO Highlight VS Code 插件会非常有用。该插件会在代码注释中突出显示某些关键字，如 FIXME: 和 TODO: 以提醒注意事项或尚未完成的事情。
Better comments 该插件对不同类型的注释会附加了不同的颜色，更加方便区分，帮助我们在代码中创建更人性化的注释。
Colorize Colorize 会给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba 和 argb 的彩色背景将 CSS 颜色可视化，帮助开发者快速区分颜色。
Image preview 通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。
CodeSnap CodeSnap 用于对代码的进行截图和共享。屏幕截图可以用文本或形状进行注释，并通过链接共享或包含在网站或文档中。只需使用 ctrl + shift + P 并输入 CodeSnap，然后按回车键，CodeSnap 窗口就会打开。
Error Lens Error Lens 是一款把代码检查(错误、警告、语法问题)进行突出显示的插件。Error Lens 通过使诊断更加突出，增强了语言的诊断功能，突出显示了由该语言生成的诊断所在的整行，并在代码行的位置以行方式在线打印了诊断消息。
主题图标
- One Dark Pro
- Monokai Charcoal high contrast 极客风格
- Material Icon Theme 该插件根据最新的 Material Design 主题为文件和文件夹提供图标。它可以帮助我们识别文件并为编辑器添加自定义的外观。
{
// 侧边栏栏放右侧
"workbench.sideBar.location": "right",
// 关闭代码小地图
"editor.minimap.enabled": false,
"editor.fontSize": 16,
"editor.fontFamily": "'Cascadia Code','Operator Mono','JetBrains Mono','Fira Code',Consolas, 'Courier New', monospace,'FuraMono Nerd Font Mono'",
// 打开连字符
"editor.fontLigatures": true,
// 关闭右侧open Editor 显示 0 为关闭
"explorer.openEditors.visible": 3,
// icon文件
"workbench.iconTheme": "material-icon-theme",
// 用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值
"editor.tabCompletion": "on",
// 视图设置方式 ui还是json ctrl+, 会出现json配置 否则是ui
"workbench.settings.editor": "json",
/*================ 代码保存自动格式化 ================*/
// "editor.formatOnSave": true, // 每次保存的时候将代码按格式进行修复 prettier
"editor.formatOnPaste": true, // 粘贴时格式化代码
"editor.detectIndentation": false, // vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.tabSize": 2, // 重新设定tabsize,根据自己的习惯
"editor.insertSpaces": false, //tab时不插入空格
"editor.formatOnType": true, //开启自动格式化
"editor.codeActionsOnSave": {
// import按照字母顺序排序
"source.organizeImports": false,
// eslint 自动修复
"source.fixAll.eslint": true,
// 保存时是否自动 stylelint 修复
"source.fixAll.stylelint": false,
// 保存时自动修复错误
"source.fixAll": true
},
/*================ 各种文件配置不同格式化 ================*/
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
// json文件默认格式化方式prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
// json文件默认格式化方式prettier
"editor.defaultFormatter": "vscode.json-language-features"
},
"[css]": {
// css文件默认格式化方式prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
// typescript文件默认格式化方式prettier
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 针对特定的语言进行单独配置
"[javascript]": {
// 设置 javascript 的默认格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
// 格式化 vue 文件 vue2使用 vetur vue3使用 volar
// "editor.defaultFormatter": octref.vetur Vue.volar esbenp.prettier-vscode
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
/*================ prettier ================*/
// 设置默认格式化工具为 prettier
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.printWidth": 120, // 超过最大值换行
"prettier.tabWidth": 4, // 缩进字节数
"prettier.useTabs": true, // 缩进使用tab，不使用空格
"prettier.semi": false, // 句尾添加分号
"prettier.singleQuote": true, // 使用单引号代替双引号
"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"prettier.bracketSameLine": false, // 在jsx中把'>' 是否单独放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） es5 none
/*================ eslint ================*/
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.enable": true,
"eslint.format.enable": true,
"eslint.run": "onType",
"eslint.nodePath": "",
"eslint.options": {
"extensions": [".js", ".vue", ".ts", ".tsx", ".html", ".css"]
},
"eslint.validate": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"json5"
],
// 右下角显示图标
"eslint.alwaysShowStatus": true,
"eslint.codeActionsOnSave.rules": null,
/*================ stylelint ================*/
// "stylelint.validate": [
// "css",
// "less",
// "postcss",
// "scss",
// "vue",
// "sass"
// ],
/*================ vetur ================*/
"vetur.format.enable": true, //vue的html区域使用prettyhtml格式化规则
"vetur.format.defaultFormatter.css": "prettier", //vue的style区域使用prettier规则
"vetur.format.defaultFormatter.postcss": "prettier", //<style lang='postcss'>区域的默认格式化器
"vetur.format.defaultFormatter.scss": "prettier", //<style lang='scss'>区域的默认格式化器
"vetur.format.defaultFormatter.less": "prettier", //<style lang='less'>区域的默认格式化器
"vetur.format.defaultFormatter.ts": "prettier", //ts <script>区域的默认格式化程序
"vetur.format.defaultFormatter.js": "prettier", //js <script>区域的默认格式化程序
"vetur.format.options.tabSize": 5, //每个缩进级别的空格数
// vetur 默认格式化配置 "vetur.format.defaultFormatterOptions"
/*================ volar ================*/
/*================ CSScomb ================*/
// 文件联想
"files.associations": {
"*.cjson": "jsonc",
"*.wxml": "html",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "vue",
"git-error-1672973911601": "bat"
},
//在使用搜索功能时，将这些文件夹/文件排除在外
"search.exclude": {
"**/target": true,
"**/.git": true,
"**/.github": true,
"**/.nuxt": true,
"**/.output": true,
"**/.pnpm": true,
"**/.vscode": true,
"**/.yarn": true,
"**/bower_components": true,
"**/dist/**": true,
"**/logs": true,
"**/node_modules": false,
"**/out/**": true,
"**/package-lock.json": true,
"**/pnpm-lock.yaml": true,
"**/tmp": true,
"**/yarn.lock": true
},
// 引入文件路径改变 自动更新路径
"javascript.updateImportsOnFileMove.enabled": "always",
// 文件失去焦点保存文件
"files.autoSave": "onFocusChange",
/*================ Git ================*/
// git同步提示
"git.confirmSync": false,
// git自动获取远端更新
"git.autofetch": true,
// Sync命令配置为始终在运行时使用rebase而不是merge
"git.rebaseWhenSync": true,
/*================ Vim ================*/
"vim.easymotion": true,
"vim.sneak": true,
"vim.incsearch": true,
"vim.useSystemClipboard": true, // 网站粘贴的东西也是可以
"vim.useCtrlKeys": true, // 优先考虑vim
"vim.hlsearch": true,
// 不交给vim的键
"vim.handleKeys": {
"<C-c>": false,
"<C-v>": false,
"<C-a>": false,
"<C-f>": false,
"<C-z>": false,
"<C-x>": false
},
// visual模式下 如果使用vscode的快捷键 使用ctrl 使用vim的必须用<C-x>
"vim.visualModeKeyBindings": [
{
"before": ["<C-h>"],
"after": ["^"]
},
{
"before": ["<C-l>"],
"after": ["g", "_"]
}
],
// insert模式下键映射
"vim.insertModeKeyBindings": [
{
"before": ["j", "j"],
"after": ["<Esc>"]
}
],
// normal模式下
"vim.normalModeKeyBindingsNonRecursive": [
{
"before": ["ctrl", "q"],
"commands": ["editor.action.closeActiveEditor"]
},
{
"before": ["<leader>", "r"],
"commands": ["editor.action.rename"]
},
{
"before": ["<leader>", "n", "d"],
"commands": ["explorer.newFolder"]
},
{
"before": ["<leader>", "n", "f"],
"commands": ["explorer.newFile"]
},
{
"before": ["<C-h>"],
"after": ["^"]
},
{
"before": ["<C-l>"],
"after": ["g", "_"]
},
{
"before": ["<leader>", "d"],
"after": ["d", "d"]
},
{
"before": ["<C-n>"],
"commands": [":nohl"]
},
{
"before": ["K"],
"commands": ["lineBreakInsert"],
"silent": true
}
],
"vim.operatorPendingModeKeyBindings": [
{
"before": ["<C-h>"],
"after": ["^"]
},
{
"before": ["<C-l>"],
"after": ["g", "_"]
}
],
"vim.leader": "<space>",
"explorer.confirmDelete": false,
"debug.javascript.autoAttachFilter": "disabled",
"GitCommitPlugin.ShowEmoji": false,
/*================ TODOTREE ================*/
//todo-tree 标签配置 标签兼容大小写字母(很好的功能!!!)
"todo-tree.regex.regex": "((%|#|//|<!--|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])",
"todo-tree.general.tags": [
"todo", //添加自定义的标签成员,将在下面实现它们的样式
"bug",
"tag",
"done",
"mark",
"tst",
"update"
],
"todo-tree.regex.regexCaseSensitive": false,
"todo-tree.highlights.defaultHighlight": {
//如果相应变量没赋值就会使用这里的默认值
"foreground": "black", //字体颜色
"background": "yellow", //背景色
"icon": "check", //标签样式 check 是一个对号的样式
"rulerColour": "yellow", //边框颜色
"type": "tag", //填充色类型 可在TODO TREE 细节页面找到允许的值
"iconColour": "yellow" //标签颜色
},
"todo-tree.highlights.customHighlight": {
//todo 需要做的功能
"todo": {
"icon": "alert", //标签样式
"background": "#c9c552", //背景色
"rulerColour": "#c9c552", //外框颜色
"iconColour": "#c9c552" //标签颜色
},
//bug 必须要修复的BUG
"bug": {
"background": "#eb5c5c",
"icon": "bug",
"rulerColour": "#eb5c5c",
"iconColour": "#eb5c5c"
},
//tag 标签
"tag": {
"background": "#38b2f4",
"icon": "tag",
"rulerColour": "#38b2f4",
"iconColour": "#38b2f4",
"rulerLane": "full"
},
//done 已完成
"done": {
"background": "#5eec95",
"icon": "check",
"rulerColour": "#5eec95",
"iconColour": "#5eec95"
},
//mark 标记一下
"mark": {
"background": "#f90",
"icon": "note",
"rulerColour": "#f90",
"iconColour": "#f90"
},
//tst 测试代码
"tst": {
"background": "#df7be6",
"icon": "flame",
"rulerColour": "#df7be6",
"iconColour": "#df7be6"
},
//update 优化升级点
"update": {
"background": "#d65d8e",
"icon": "versions",
"rulerColour": "#d65d8e",
"iconColour": "#d65d8e"
}
},
"GitCommitPlugin.MaxSubjectCharacters": 50,
"files.autoGuessEncoding": true,
"remote.SSH.configFile": "C:\\Users\\admin\\.ssh\\config",
"remote.SSH.remotePlatform": {
"121.41.96.30": "linux",
"120.48.93.83": "linux"
},
"console-ninja.outputMode": "In View",
"git.ignoreRebaseWarning": true,
"px2rem.rootFontSize": 100,
"liveServer.settings.donotVerifyTags": true,
"powermode.enabled": true,
"leek-fund.stocks": [
"sz300341",
"sz300223",
"sz300206",
"sz300846",
"sz002415",
"sz000338",
"sh600150",
"sh603259",
"sh000001",
"sh601788",
"sz002241",
"sz002230",
"sz002229",
"sh601688"
],
"leek-fund.funds": [],
"leek-fund.statusBarStock": ["sz300341"],
"leek-fund.fundGroups": [],
"leek-fund.stockSort": -1,
"explorer.confirmDragAndDrop": false,
"diffEditor.ignoreTrimWhitespace": false,
"window.zoomLevel": 1
}