本文围绕VSCode展开，介绍了其多方面实用功能。涵盖主题、文件图标设置，支持汉化，具备代码提示如类名、JS、React等代码提示，还有代码格式化功能。此外，还有快速打印、中文翻译变量名等特色功能，最后提及了配置文件相关内容。
主题
Dracula Official 和 One Dark Pro
页面
经典的主题
文件图标
Material Icon Theme
效果
汉化
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
代码提示
IntelliSense for CSS class names in HTML类名提示
IntelliCode
JavaScript (ES6) code snippetsjs 代码提示
npm Intellisense导入包提示
Simple React Snippetsreact 代码片段提示
Tabnine
TONGYI Lingma
Typescript React code snippets
Vue VSCode Snippetsvue代码提示
代码格式化
-
Eslint
-
Prettier - Code formatter
-
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro编译文件
-
volar
其他
Turbo Console Log快速打印驼峰翻译助手输入中文翻译成对应格式的变量名any-rule正则大全Autoprefixercss 兼容Code Runner运行代码Code Spell Checker单词拼写检测Color Highlight颜色高亮Color Picker颜色选择Error Lens和Error Guttersfilesize文件大小Highlight Matching Tag高亮选中标签Image preview图片预览Import Cost导入包大小js-annotation简洁和轻巧的用于生成适用于 HTML 和 JS（包括 React、Vue 等三方库）的函数/文件注释插件Live Server本地起服务
配置文件
{
// 编辑器配置开始
"editor.guides.bracketPairs": true, // 在括号之间显示匹配的光标导航线
"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 字体家族
"editor.fontLigatures": true, // 启用字体连字 ligatures
"editor.codeActionsOnSave": {
// 在保存文件时执行的代码操作
"source.fixAll.eslint": true, // 自动修复 ESLint 问题
"source.fixAll": true // 执行所有可用的修复操作
},
"editor.lineNumbers": "on",
"search.followSymlinks": false, // 不跟踪符号链接进行搜索
"editor.foldingHighlight": true,
"editor.formatOnSave": true, // 在保存文件时自动格式化代码
"editor.formatOnPaste": true, // 在粘贴代码时自动格式化
"editor.formatOnType": true, // 在输入代码时自动格式化
"editor.unicodeHighlight.ambiguousCharacters": false, // 工作台颜色主题
"editor.quickSuggestionsDelay": 100, // 快速建议延迟
"editor.tabSize": 2, // 缩进大小
"editor.insertSpaces": true, // 使用空格进行缩进
"editor.snippetSuggestions": "top", // 代码片段建议位置
"editor.autoClosingBrackets": "always", // 总是自动闭合括号
"editor.autoClosingQuotes": "always", // 总是自动闭合引号
"editor.guides.highlightActiveBracketPair": true,
"editor.suggest.shareSuggestSelections": true,
"editor.find.cursorMoveOnType": false,
"editor.linkedEditing": true,
"editor.largeFileOptimizations": false,
"editor.foldingStrategy": "auto", // 配置代码折叠为只显示头部注释
"editor.fontSize": 16,
"editor.inlayHints.fontSize": 16,
"autoprefixer.formatOnSave": true,
"editor.tabCompletion": "on",
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSaveMode": "modificationsIfAvailable",
"editor.wordWrap": "on", // 自动换行
"editor.inlineSuggest.enabled": true, // 启用内联建议
"diffEditor.diffAlgorithm": "advanced",
"editor.inlineSuggest.suppressSuggestions": true,
"editor.folding": true, // 启用代码折叠
"diffEditor.renderSideBySide": true, // 对比编辑器以并排方式显示
// 编辑器配置结束
// 工作台配置开始
"workbench.cloudChanges.continueOn": "prompt",
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000090",
"editor.lineHighlightBorder": "#ffffff30"
},
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
"workbench.editorAssociations": {
"*.db": "default"
},
// 工作台配置结束
// 终端配置开始
"terminal.integrated.fontFamily": "monospace", // 禁用代码迷你地图
"terminal.integrated.cursorBlinking": true,
// 终端配置结束
// 搜索排除
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/*.code-search": true,
"**/package.json": true
},
// 文件格式化器配置 开始
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[css]": {
// CSS 文件的格式化器
"editor.defaultFormatter": "vscode.css-language-features"
},
"[scss]": {
// SCSS 文件的格式化器
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
// JavaScript 文件的格式化器
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[php]": {
"editor.defaultFormatter": "muuvmuuv.vscode-just-php-cs-fixer"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[markdown]": {
"editor.formatOnSave": true
},
// 文件格式化器配置结束
// 文件配置开始
"files.associations": {
// 文件关联
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"files.exclude": {
// 要在资源管理器中排除的文件和文件夹
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/tmp": true,
"**/node_modules": false, // 不排除 node_modules 文件夹
"**/bower_components": true,
"**/*/*.js": {
"when": "$(basename).ts"
}
},
"files.defaultLanguage": "html",
"files.watcherExclude": {
// 要排除的文件和文件夹以进行监视
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true
}, // 在一段时间后自动保存文件
"files.encoding": "utf8", // 文件编码
// 在保存时移除尾随空白
"files.trimFinalNewlines": true,
"files.trimTrailingWhitespace": true, // 去除行末尾的空格
"explorer.confirmDragAndDrop": false,
"security.workspace.trust.untrustedFiles": "open",
// 文件配置结束
// Emmet 配置开始
"emmet.includeLanguages": {
// 包括 Emmet 支持的语言
"wxml": "html"
},
"emmet.syntaxProfiles": {
"wxss": "css",
"wxml": "html",
"less": "css",
"scss": "css",
"sass": "css"
},
"emmet.triggerExpansionOnTab": true,
// Emmet 配置结束
// 编程配置开始
"git.confirmSync": false, // 禁用同步仓库时的确认提示
"git.openRepositoryInParentFolders": "never", // 永不在父文件夹中打开仓库
"git.autofetch": true, // 自动获取远程分支
"javascript.validate.enable": true, // 启用 JavaScript 语法验证
"markdown.preview.fontSize": 16, // Markdown 预览字号
"markdown.preview.lineHeight": 1.6, // Markdown 预览行高
// 配置标签自动闭合的触发字符
"html.autoClosingTags": true,
"javascript.preferences.quoteStyle": "single",
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.updateImportsOnFileMove.enabled": "always",
// 编程配置结束
// 插件配置开始
"cssrem.rootFontSize": 36,
"turboConsoleLog.insertEmptyLineBeforeLogMessage": true,
"turboConsoleLog.wrapLogMessage": true,
"turboConsoleLog.logMessagePrefix": "💀",
"vue.autoInsert.dotValue": true,
"vue-helper.quotes": "single",
"vue-helper.rem-px": 100,
"turboConsoleLog.insertEmptyLineAfterLogMessage": true,
"compile-hero.jade-output-directory": "../dist/html",
"compile-hero.javascript-output-directory": "../dist/js",
"compile-hero.pug-output-directory": "../dist/html",
"compile-hero.sass-output-directory": "./",
"compile-hero.scss-output-directory": "../dist/css",
"compile-hero.stylus-output-directory": "../dist/css",
"compile-hero.typescript-output-directory": "./",
"compile-hero.typescriptx-output-directory": "../dist/js",
"compile-hero.less-output-directory": "./",
"tabnine.logEngine": true,
"tabnine.receiveBetaChannelUpdates": true,
"liveServer.settings.port": 3465,
"liveServer.settings.donotShowInfoMsg": true,
"projectManager.groupList": true,
"projectManager.sortList": "Saved",
"liveServer.settings.donotVerifyTags": true,
"varTranslation.baiduSecret": "20231011001843458,zwNfdFSL710wErVtYD6Q",
"varTranslation.translationEngine": "baidu",
"4399-on-vscode.alert": false,
"tabnine.experimentalAutoImports": true,
// 插件配置结束
// better-comments 配置开始
"better-comments.highlightPlainText": true,
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "&",
"color": "#a300d9",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
},
{
"tag": "FIXME",
"color": "rgba(232, 94, 143)",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": false,
"italic": false
}
],
"debug.console.fontSize": 16, // 调试控制台字号
"extensions.ignoreRecommendations": true,
"window.commandCenter": false,
"explorer.confirmDelete": false,
// window 配置结束
//todo-tree 标签配置 标签兼容大小写字母(很好的功能!!!)
"todo-tree.regex.regex": "((%|#|//|<!--|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])",
"todo-tree.general.tags": [
"todo", //添加自定义的标签成员,将在下面实现它们的样式
"bug",
"tag",
"done",
"mark",
"test",
"update",
"fixme"
],
"todo-tree.regex.regexCaseSensitive": false,
"todo-tree.highlights.defaultHighlight": {
//如果相应变量没赋值就会使用这里的默认值
"foreground": "#000", //字体颜色
"background": "#F9D569", //背景色
"icon": "check", //标签样式 check 是一个对号的样式
"rulerColour": "#F9D569", //边框颜色
"type": "tag", //填充色类型 可在TODO TREE 细节页面找到允许的值
"iconColour": "#F9D569" //标签颜色
},
"todo-tree.highlights.customHighlight": {
//todo 需要做的功能
"todo": {
"icon": "alert", //标签样式
"background": "#F9D569", //背景色
"rulerColour": "#F9D569", //外框颜色
"iconColour": "#F9D569" //标签颜色
},
//bug 必须要修复的BUG
"bug": {
"background": "#E36777",
"icon": "bug",
"rulerColour": "#E36777",
"iconColour": "#E36777"
},
//tag 标签
"tag": {
"background": "#9FD8FF",
"icon": "tag",
"rulerColour": "#9FD8FF",
"iconColour": "#9FD8FF",
"rulerLane": "full"
},
//done 已完成的功能点
"done": {
"background": "#5eec95",
"icon": "verified",
"rulerColour": "#5eec95",
"iconColour": "#5eec95"
},
//mark 需要注意的地方
"mark": {
"background": "#f90",
"icon": "note",
"rulerColour": "#f90",
"iconColour": "#f90"
},
//test 需要测试的地方
"test": {
"background": "#C39EE2",
"icon": "flame",
"rulerColour": "#C39EE2",
"iconColour": "#C39EE2"
},
//update 需要升级的地方
"update": {
"background": "#F690AA",
"icon": "sync",
"rulerColour": "#F690AA",
"iconColour": "#F690AA"
},
//fixme 需要修复的问题
"fixme": {
"background": "#FFB599",
"icon": "tools",
"rulerColour": "#FFB599",
"iconColour": "#FFB599"
}
},
"todo-tree.tree.expanded": true,
"todo-tree.tree.buttons.export": true,
//todo-tree 配置结束
// Eslint 和 prettier 配置开始
// 配置eslint相关的
"eslint.format.enable": true,
"eslint.codeActionsOnSave.rules": null,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"json"
],
"eslint.probe": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
"markdown",
"json"
],
"eslint.run": "onSave",
"eslint.enable": true,
"eslint.codeAction.disableRuleComment": {
"enable": true,
"location": "separateLine",
"commentStyle": "line"
},
"prettier.singleQuote": true,
"eslint.problems.shortenToSingleLine": true,
"stylelint.reportDescriptionlessDisables": true,
"stylelint.packageManager": "pnpm",
"prettier.jsxSingleQuote": true,
"prettier.proseWrap": "always",
"prettier.singleAttributePerLine": true,
"prettier.useEditorConfig": false,
"prettier.useTabs": true,
"stylelint.enable": true,
"prettier.enable": true,
"prettier.printWidth": 80,
"Codegeex.Privacy": true,
"window.zoomLevel": -1,
"workbench.colorTheme": "Dracula"
// Eslint 和 prettier 配置结束
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
