插件列表
| 插件名称 | 功能描述 |
|---|---|
| Auto Close Tag | 自动闭合 html 标签 |
| Auto Import | Typescript 自动 import 提示 |
| Auto Rename Tag | 修改 html 标签时，自动修改配对的标签 |
| Beautify css/sass/scss/less |
css/sass/less 格式化 |
| Better Comments | 优化注释。通过 ? ! todo 等标记，让注释拥有丰富的颜色 |
| Bracket Pair Colorizer | 每个代码块的括号都是一种颜色 |
| Bookmarks | 添加行书签 |
| Can I Use | 检查 HTML5, CSS3, SVG 的浏览器兼容性 |
| Chinese (Simplified) Language Pack for Visual Studio Code | 中文（简体）语言包扩展 |
| Code Runner | 运行选中的代码段，支持的语言很丰富 |
| Code Spell Checker | 单词拼写检查 |
| Color Highlight | 高亮显示颜色值 |
| Color Info | 在 hover 弹框中显示颜色代码信息 |
| cssrem |
css 中像素值转换为 rem 值 |
| ESLint | 代码风格检查工具 |
| EditorConfig for VS Code | EditorConfig 插件 |
| Emoji | 从命令面板选择 emoji 图标插入文档中 |
| File peek | 根据路径字符快速定位到文件 |
| Git Blame | 在底部状态栏显示当前行的 Git 信息 |
| Git History | 查看 git log 信息 |
| GitLens | 显示文件最近的 commit 和作者，显示当前行的 commit 信息 |
| Guides | 高亮显示缩进基准线 |
| Indenticator | 缩进高亮 |
| JavaScript (ES6) code snippets | ES6 代码片段 |
| JSON Tools | 格式化和压缩 Json
|
| Less IntelliSense | Less 变量与混合提示 |
| Lodash | Lodash 代码片段 |
| Markdown Preview Enhanced | Markdown 预览 |
| Material Icon Theme | 文件图标主题 |
| Node modules resolve | 快速导航到 Node 模块 |
| npm Intellisense | 导入模块时，提示已安装的模块名；运行 npm 命令 |
| One Dark Pro | 非常好看的深色主题 |
| Path Intellisense | 路径提示 |
| Prettier - Code formatter | 代码格式化工具 |
| stylus | stylus 语法高亮 |
| TODO Highlight | 注释中 TODO: 高亮 |
| Vetur | 目前最好的 Vue 语法高亮插件 |
json 配置文件
{
/* ==================== 基础 配置 ==================== */
"workbench.colorTheme": "One Dark Pro", // 颜色主题
"workbench.iconTheme": "material-icon-theme", // 文件图标主题设置
"editor.fontLigatures": true, // 启用字体连字
"editor.formatOnSave": true, // 保存时格式化
"editor.minimap.enabled": true, // 显示缩略图
"editor.renderIndentGuides": false, // 显示缩进参考线
"editor.fontSize": 14, // 编辑区域字体大小
"terminal.integrated.fontSize": 14, // 终端字体大小
"editor.lineHeight": 28, // 行高
"editor.tabSize": 2, // 一个制表符（缩进）为两个空格
"editor.lineNumbers": "on", // 显示绝对行数
"editor.rulers": [
// 在120个字符的位置显示标尺
120
],
"editor.wordWrap": "on", // 控制本文在可视区域处换行
"editor.codeActionsOnSave": {
// 来自所有插件的所有可自动修复的ESLint错误都将在保存时修复
"source.fixAll.eslint": true
},
"extensions.ignoreRecommendations": true, // 不显示扩展建议通知
/* ==================== 搜索 配置 ==================== */
"search.exclude": {
// 全局搜索时不包含
"**/.vscode": false,
"**/node_modules": true,
"**/dist": true,
"**/bower_components": true,
"**/build": true,
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/yarn.lock": true
},
/* ==================== 文件相关 配置 ==================== */
"files.trimTrailingWhitespace": true, // 文件保存时删除每一行末尾多余的空格
"files.insertFinalNewline": true, // 文件保存时在文件末尾插入一个新行
"files.trimFinalNewlines": true, // 保存时，删除最终新行后的所有空行
"files.associations": {
// 配置语言的文件关联
"*.vue": "vue",
"*.wxml": "html",
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript"
},
/* ==================== emmet 配置 ==================== */
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"wxml": "html"
},
/* ==================== prettier 配置 ==================== */
"prettier.semi": false,
"prettier.singleQuote": true,
/* ==================== cssrem 配置 ==================== */
"cssrem.rootFontSize": 100,
/* ==================== 格式化规则 配置 ==================== */
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 文件换行符为 LF
"files.eol": "\n",
// 因为安装了 Color Highlight，禁用掉自带的颜色修饰器
"editor.colorDecorators": false
}
以前喜欢把 prettier 的详细配置配置到 VSCode 的配置文件中，后来项目做多了，发现这样很不灵活，技术栈的差异、团队的差异，这些因素迫使我在每一个项目中去维护一份专属于项目的 prettier 配置。我常用的配置如下：
// 项目根路径下的 .prettierrc 文件
{
"endOfLine": "auto",
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"overrides": [
{
"files": ".prettierrc",
"options": { "parser": "json" }
}
]
}
自定义代码片段
自定义的代码片段可以辅助我们高效的撰写代码。
配置方式
按 F1 或者 ctrl + shift + p （windows）、command + shift + p （mac）打开命令面板。输入 片段 或 Snippet 即可找到配置入口。
1
回车然后选择需要配置的语言进行配置。
2
配置的语法请参考官方文档：Creating your own snippets
我常用的自定义代码片段
下面我贴出我的配置项，仅供参考。
Html
{
"Init PC html": {
// 初始化PC项目文件
"prefix": "init-pc",
"body": [
"<!DOCTYPE html>",
"<html lang=\"${1:zh-cmn-Hans}\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=${2:device-width}, initial-scale=${3:1.0}\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"${4:ie=edge}\">",
"\t<title>${5:标题}</title>",
"</head>",
"<body>",
"$6",
"</body>",
"</html>"
],
"description": "Init PC html"
},
"Init mobile html": {
// 初始化移动端项目文件
"prefix": "init-mobile",
"body": [
"<!DOCTYPE html>",
"<html lang=\"${1:zh-cmn-Hans}\">",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=${2:device-width}, initial-scale=${3:1.0}, user-scalable=${4:no}, minimum-scale=${5:1.0}, maximum-scale=${6:1.0}\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"${7:ie=edge}\">",
"\t<title>${8:标题}</title>",
"</head>",
"<body>",
"$9",
"</body>",
"</html>"
],
"description": "Init mobile html"
}
}
Vue
{
"Init vue file": {
// 文件初始化
"prefix": "init-vue",
"body": [
"<template>",
"\t<div class=\"${1:${TM_FILENAME_BASE}}\">$3",
"\t</div>",
"</template>\n",
"<script>",
"export default {",
"\tname: '$1',",
"\tprops: [],",
"\tcomponents: {},",
"\tdata () {",
"\t\treturn {}",
"\t},",
"\tbeforeRouteEnter (to, from, next) {",
"\t\tnext(vm => vm.init())",
"\t},",
"\tmounted () {",
"\t\tthis.\\$nextTick(() => this.init())",
"\t},",
"\tcomputed: {},",
"\tfilters: {},",
"\twatch: {",
"\t\texample (val, oldVal) {",
"\t\t}",
"\t},",
"\tmethods: {",
"\t\tinit () {}",
"\t}",
"}",
"</script>\n",
"<style scoped lang=\"${2:scss}\">",
".$1 {}",
"</style>"
],
"description": "Log output to console"
},
"Print to console": {
"prefix": "log",
"body": ["console.log('$1')$2"],
"description": "Log output to console"
}
}
网友评论