-
Auto Rename Tag
- 介绍: html标签自动补全插件
- 插件相关配置:
可以通过以下配置,设置插件在什么语言下生效,默认是所有语言都有效。{ "auto-rename-tag.activationOnLanguage": [ "html", "xml", "php", "javascript" ] }
- 效果:
-
Beautify
- 介绍: 代码格式化工具,支持
javascript, JSON, CSS, Sass, HTML
- 快捷键:
Alt+Shift+F
- 自定义快捷键方式:
{ "key": "Ctrl+b", "command": "HookyQR.beautify", "when": "editorFocus" }
- 插件相关配置:
以下为Beautify在VS Code下的相关配置方式。详细配置地址setting
另外: 配置也可以以.jsbeautifyrc配置文件的方式置于项目中。{ "beautify.config": { "eol": "\n", // 用作换行符的字符。 "tab_size": 4, // 一个tab等于几个空格 ... }, // 设置忽略哪些文件 "beautify.ignore": ["*/test.js", "**/spec/*", "**/test/**/*"], // [忽略所有在根路径下的test.js, 忽略任意直接在spec路径下的文件, 忽略任意test路径下任意深度的文件] "beautify.ignore": "**/*_test.js" // 忽略任意以"_test.js"结尾的文件 ... }
- 介绍: 代码格式化工具,支持
-
Bracket Pair Colorizer
- 介绍: 以不同的颜色显示括号
- 效果:
-
Chinese(Simplified)
- 介绍: VSCode 汉化插件
- 使用方法:
F1打开命令面板 >> 输入"config" >> 选择Configure Display Language >> 修改locale
为zh-cn
-
Color Hightlight
- 介绍: 颜色高亮插件
- 使用方法: 鼠标放到颜色代码上会自动弹出选色框,点击顶部颜色条可以切换16进制、hsl、rgb三种颜色模式;色板区域可以点击选色;右侧颜色拖栏可以选择颜色和透明度。
- 效果:
-
CSS Peek
- 介绍: 可以直接查看, 转到class定义等
- 使用方法:
- 在类名, ID 和 HTML标签上右击
右键菜单中点击转到定义
会打开对应的css文件,如果该选择器对应多个定义会出现弹框, 双击定义位置打开对应文件;
点击查看定义
会以弹框的方式显示当前选择器的具体css情况.
2. Alt + 鼠标
Alt + 点击
相当于转到定义
, 如果该选择器对应多个定义会出现弹框, 双击定义位置打开对应文件;
Alt + hover
相当于查看定义
.
-
Document This
- 介绍: 自动为TypeScript和JavaScript文件生成详细的
JSDoc
注释 - 快捷键:
Ctrl+Alt+D
然后再次Ctrl+Alt+D
- 效果:
- 介绍: 自动为TypeScript和JavaScript文件生成详细的
-
ESLint
- 介绍: 将ESLint集成到VS Code中
- 使用方法:
- 该扩展需要使用安装在工作区文件夹中的ESLint库, 如果文件夹内未提供, 扩展会自动查找全局安装版本.
- 另外在文件夹中还需要.eslintrc配置文件, 也可以通过
eslint.options
下的configFile
属性指定配置文件地址.
- 快捷键:
Ctrl+S
会自动按规定格式 - 插件相关配置:
{ "eslint.enable": true, // 启用/禁用ESLint。默认情况下启用。 "eslint.provideLintTask": false, // 是否lint整个工作区文件夹。 "eslint.packageManager": "npm", // 控制用于解析ESLint库的包管理器。 有效值为"npm"或"yarn"或"pnpm"。 "eslint.options": {}, // 配置如何使用ESLint CLI Engine API启动ESLint的选项 "eslint.run": "onType", // 在哪种情况下运行. 有效值"onSave"/保存时 "onType"/输入时 "eslint.autoFixOnSave": true, // 保存的时候自动修复可以修复的问题 "eslint.runtime": "", // 设置节点运行时的路径以运行ESLint "eslint.nodePath": "", // 如果无法检测到已安装的ESLint包可以使用此设置手动指定ESLint包地址. 比如: /myGlobalNodePackages/node_modules "eslint.validate": ["javascript", "javascriptreact", "html"], // 指定要验证的文件 默认为["javascript", "javascriptreact"] "eslint.workingDirectories": [], // 指定要使用的工作目录的数组。ESLint解析相对于工作目录的配置文件 "eslint.codeAction.disableRuleComment": { "enable": true, // 在快速修复菜单中显示禁用lint规则 默认值为true "location": "separateLine" // 在同一行或不同行添加eslint-disable注释 有效值为"separateLine " 或 "sameLine" }, "eslint.codeAction.showDocumentation": { // 在快速修复菜单中显示lint规则文档网页 默认为true "enable": true } }
- 命令
- Create ESLint Configuration:创建一个新.eslintrc.json文件。
- Fix all auto-fixable problems:将ESLint自动修复解决方案应用于所有可修复的问题。
- Disable ESLint:禁用ESLint扩展。
- Enable ESLint:启用ESLint扩展。
-
HTML CSS Support
- 介绍: 该插件会扫描工作区中的css和scss文件, 并在别处书写类名或id名时给予提示, 支持语言包括: html, laravel-blade, razor, vue, pug, jade, handlebars, php, twig, md, nunjucks, javascript, javascriptreact.
还有一款插件叫IntelliSense for CSS class names in HTML
, 功能类似 - 插件相关配置:
- 支持指定远程样式表
"css.remoteStyleSheets": [ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" ]
- 默认解析css和scss文件, 也可以配置样式表文件扩展名(好像配不配置没啥区别, 另外插件不支持less)
"css.fileExtensions": ["css", "scss"]
- 支持指定远程样式表
- 效果:
- 介绍: 该插件会扫描工作区中的css和scss文件, 并在别处书写类名或id名时给予提示, 支持语言包括: html, laravel-blade, razor, vue, pug, jade, handlebars, php, twig, md, nunjucks, javascript, javascriptreact.
-
Image preview
- 介绍: 提供图片预览功能
- 效果:
-
open in browser
- 介绍: 直接在浏览器中打开当前文件, 一般在html中使用
- 快捷键:
- 通过默认浏览器打开:
Ctrl+F1
或 通过右键Open In Default Browser
(默认快捷键是Alt+B
) - 通过其他浏览器打开:
Shift+Alt+B
或 通过右键Open In Other Browsers
- 通过默认浏览器打开:
- 效果:
-
Path Intellisense
- 介绍: 文件路径智能提示
- 插件相关配置:
- 如果语句是import语句,则插件会默认删除文件扩展名。要启用文件扩展名,请将以下设置设置为true
{ "path-intellisense.extensionOnImport": true, }
- 默认情况下,不显示隐藏文件。将其设置为true以显示隐藏文件。
设置为false,PathIntellisense也会忽略默认的“files.exclude”{ "path-intellisense.showHiddenFiles": true, }
{ "files.exclude": { "**/*.map.js": true } }
- 默认情况下,自动完成不会在目录后添加斜杠。
{ "path-intellisense.autoSlashAfterDirectory": false, }
- 默认情况下,绝对路径会按当前工作空间根路径解析。将其设置为false绝对路径以磁盘根路径解析。
{ "path-intellisense.absolutePathToWorkspace": true, } ### Mappings 也可以自定义路径的解析 { "path-intellisense.mappings": { "/": "${workspaceRoot}", "lib": "${workspaceRoot}/lib", "global": "/Users/dummy/globalLibs" }, }
- 如果语句是import语句,则插件会默认删除文件扩展名。要启用文件扩展名,请将以下设置设置为true
- 效果:
-
Setting Sync
- 介绍: VSCode 插件及配置等同步工具
- 使用方法
详细使用方法: Settings-Sync - 快捷键:
- 上传配置快捷键:
Shift + Alt + U
- 下载配置快捷键:
Shift + Alt + D
- 上传配置快捷键:
-
Sublime Text Keymap and Setting Importer
- 介绍: 把 Sublime 的快捷键映射到VSCode
-
TortoiseSVN
- 介绍: 在VSCode中直接使用SVN功能, 可以自己配置快捷键
- 效果:
-
Trailing Spaces
- 介绍: 高亮显示拖尾空格
- 快捷键: 可以添加快捷键
Alt+Shift+T
, 一次删除所有拖尾空格.{ "key": "alt+shift+t", "command": "trailing-spaces.deleteTrailingSpaces", "when": "editorTextFocus" }
- 插件相关设置:
- 可以隐藏当前行的高亮拖尾空格
{ "trailing-spaces.highlightCurrentLine": false }
- 更过配置Trailing Spaces
- 可以隐藏当前行的高亮拖尾空格
- 效果:
-
vscode-icons
- 介绍: vscode的图标插件, 提供更丰富的图标
Vue 插件
- Vetur
- 介绍: Vue开发辅助插件, 提供代码高亮, Vue代码片段, Emmet语法, 代码检查, 代码格式化, 自动补全, 调试等功能.