vscode插件分享

最新推荐文章于 2025-03-25 13:17:38 发布

摸光了鱼鳞

最新推荐文章于 2025-03-25 13:17:38 发布

阅读量560

点赞数 6

文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/overFlowzy/article/details/134786947

版权

文章目录

主题
文件图标
汉化
代码提示
代码格式化
其他
配置文件

主题

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 snippets js 代码提示
npm Intellisense 导入包提示
Simple React Snippets react 代码片段提示
Tabnine
TONGYI Lingma
Typescript React code snippets
Vue VSCode Snippets vue代码提示

代码格式化

Eslint
Prettier - Code formatter
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro 编译文件
volar

其他

Turbo Console Log 快速打印
驼峰翻译助手 输入中文翻译成对应格式的变量名
any-rule 正则大全
Autoprefixer css 兼容
Code Runner 运行代码
Code Spell Checker 单词拼写检测
Color Highlight 颜色高亮
Color Picker 颜色选择
Error Lens 和 Error Gutters
filesize 文件大小
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 配置结束
}