Auto Rename Tag
介绍: html标签自动补全插件
插件相关配置:
可以通过以下配置，设置插件在什么语言下生效，默认是所有语言都有效。
{
"auto-rename-tag.activationOnLanguage": [
"html",
"xml",
"php",
"javascript"
]
}
1
2
3
4
5
6
7
8
效果:
Beautify
介绍: 代码格式化工具，支持javascript, JSON, CSS, Sass, HTML
快捷键: Alt+Shift+F
自定义快捷键方式:
{
"key": "Ctrl+b",
"command": "HookyQR.beautify",
"when": "editorFocus"
}
1
2
3
4
5
插件相关配置:
以下为Beautify在VS Code下的相关配置方式。详细配置地址setting
{
"beautify.config": {
"eol": "\n", // 用作换行符的字符。
"tab_size": 4, // 一个tab等于几个空格
...
},
// 设置忽略哪些文件
"beautify.ignore": ["*/test.js", "**/spec/*", "**/test/**/*"], // [忽略所有在根路径下的test.js, 忽略任意直接在spec路径下的文件, 忽略任意test路径下任意深度的文件]
"beautify.ignore": "**/*_test.js" // 忽略任意以"_test.js"结尾的文件
...
}
1
2
3
4
5
6
7
8
9
10
11
12
另外: 配置也可以以.jsbeautifyrc配置文件的方式置于项目中。
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
效果:
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
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
命令
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"
]
1
2
3
默认解析css和scss文件, 也可以配置样式表文件扩展名(好像配不配置没啥区别, 另外插件不支持less)
"css.fileExtensions": ["css", "scss"]
1
效果:
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,
}
1
2
3
默认情况下，不显示隐藏文件。将其设置为true以显示隐藏文件。
{
"path-intellisense.showHiddenFiles": true,
}
1
2
3
设置为false，PathIntellisense也会忽略默认的“files.exclude”
{
"files.exclude": {
"**/*.map.js": true
}
}
1
2
3
4
5
默认情况下，自动完成不会在目录后添加斜杠。
{
"path-intellisense.autoSlashAfterDirectory": false,
}
1
2
3
默认情况下，绝对路径会按当前工作空间根路径解析。将其设置为false绝对路径以磁盘根路径解析。
{
"path-intellisense.absolutePathToWorkspace": true,
}
### Mappings
也可以自定义路径的解析
{
"path-intellisense.mappings": {
"/": "${workspaceRoot}",
"lib": "${workspaceRoot}/lib",
"global": "/Users/dummy/globalLibs"
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
效果:
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"
}
1
2
3
4
5
插件相关设置:
可以隐藏当前行的高亮拖尾空格
{
"trailing-spaces.highlightCurrentLine": false
}
1
2
3
更过配置Trailing Spaces
效果:
vscode-icons
介绍: vscode的图标插件, 提供更丰富的图标
Vue 插件
Vetur
介绍: Vue开发辅助插件, 提供代码高亮, Vue代码片段, Emmet语法, 代码检查, 代码格式化, 自动补全, 调试等功能.
---------------------
作者：常金
来源：CSDN
原文：https://blog.csdn.net/weixin_39876634/article/details/88562183
版权声明：本文为博主原创文章，转载请附上博文链接！