VS Code 常用插件整理

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

{"beautify.config": {"eol": "\n", //  用作换行符的字符。"tab_size": 4, // 一个tab等于几个空格...},// 设置忽略哪些文件"beautify.ignore": ["*/test.js", "**/spec/*", "**/test/**/*"], // [忽略所有在根路径下的test.js, 忽略任意直接在spec路径下的文件, 忽略任意test路径下任意深度的文件]"beautify.ignore": "**/*_test.js" // 忽略任意以"_test.js"结尾的文件...
}

另外: 配置也可以以.jsbeautifyrc配置文件的方式置于项目中。

Bracket Pair Colorizer
- 介绍: 以不同的颜色显示括号
- 效果:
Chinese(Simplified)
- 介绍: VSCode 汉化插件
- 使用方法:
  F1打开命令面板 >> 输入"config" >> 选择Configure Display Language >> 修改locale为zh-cn
Color Hightlight
- 介绍: 颜色高亮插件
- 使用方法: 鼠标放到颜色代码上会自动弹出选色框，点击顶部颜色条可以切换16进制、hsl、rgb三种颜色模式；色板区域可以点击选色；右侧颜色拖栏可以选择颜色和透明度。
- 效果:
CSS Peek
- 介绍: 可以直接查看, 转到class定义等
- 使用方法:
1. 在类名, ID 和 HTML标签上右击
  右键菜单中点击转到定义会打开对应的css文件,如果该选择器对应多个定义会出现弹框, 双击定义位置打开对应文件;
  点击查看定义会以弹框的方式显示当前选择器的具体css情况.
  
  2. Alt + 鼠标
  Alt + 点击相当于转到定义 , 如果该选择器对应多个定义会出现弹框, 双击定义位置打开对应文件;
  Alt + hover 相当于 查看定义.
Document This
- 介绍: 自动为TypeScript和JavaScript文件生成详细的JSDoc注释
- 快捷键: Ctrl+Alt+D然后再次Ctrl+Alt+D
- 效果:

ESLint

介绍: 将ESLint集成到VS Code中
使用方法:
1. 该扩展需要使用安装在工作区文件夹中的ESLint库, 如果文件夹内未提供, 扩展会自动查找全局安装版本.
2. 另外在文件夹中还需要.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"]
```
- 效果:
Image preview
- 介绍: 提供图片预览功能
- 效果:
open in browser
- 介绍: 直接在浏览器中打开当前文件, 一般在html中使用
- 快捷键:
  1. 通过默认浏览器打开: Ctrl+F1 或通过右键 Open In Default Browser (默认快捷键是Alt+B)
  2. 通过其他浏览器打开: Shift+Alt+B 或通过右键 Open In Other Browsers
- 效果:
Path Intellisense
- 介绍: 文件路径智能提示
- 插件相关配置:
  - 如果语句是import语句，则插件会默认删除文件扩展名。要启用文件扩展名，请将以下设置设置为true
```
{"path-intellisense.extensionOnImport": true,
}
```
  - 默认情况下，不显示隐藏文件。将其设置为true以显示隐藏文件。
```
{"path-intellisense.showHiddenFiles": true,
}
```
    设置为false，PathIntellisense也会忽略默认的“files.exclude”
```
{"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"},
}
```
- 效果:
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语法, 代码检查, 代码格式化, 自动补全, 调试等功能.

VS Code 常用插件整理相关推荐

Visual Studio Code 常用插件整理
常用插件说明: 一.HTML Snippets 超级使用且初级的H5代码片段以及提示二.HTML CSS Support 让HTML标签上写class智能提示当前项目所支持的样式三.Debugg ...
IDEA社区版常用插件整理
IDEA社区版常用插件整理 Alibaba Java Coding Guidelines 代码规范提醒 CodeGlance 代码编辑区迷你缩放图,当代码行数过多时可以通过预览图快速定位 Codota ...
IDEA常用插件整理
IDEA常用插件整理 1. Rainbow Fart 2. EasyCode 基于IntelliJ IDEA开发的代码生成插件,支持自定义任意模板(Java,html,js,xml). 只要是与数据库 ...
vs Code常用插件和快捷键（区分 win 和 Mac）
1.让代码去除空格,变成一行选中想要合并的行,按Ctrl + Shift + P调出命令窗口,输入join lines,确认执行就可以合并多行了. 代码格式化,保存时自动格式化实现vs code中 ...
vscode前端常用插件整理（vuejs）
VsCode可以通过安装插件来使编辑器变的更加强大以下为前端开发工程师常用插件 (1)HTML Snippets 超级实用且初级的 H5代码片段以及提示 (2)HTML CSS Support 让 ...
VS code常用插件推荐（总结整理篇）
简介 vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器.当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,e ...
VS Code 常用插件推荐
我的个人博客:zhang0peter的个人博客其他 1.推荐开启自动保存开启自动保存后就不用担心忘记保存了. 2.自动选择编码配置settings.json,让其自动选择编码. {"f ...
Visual Studio Code常用插件
名称功能 Chinese (Simplified) Language Pack for Visual Studio Code 汉化 VSCode Auto Close Tag 自动为写的html标签 ...
VS code常用插件
1.Auto Close Tag 标签自动闭合 2. Auto Rename Tag 自动重命名标签 3.Better Align 设置代码对齐 Ctrl+K,Ctrl+S打开快捷键设置,搜索wwm, ...

VS Code 常用插件整理

Vue 插件

VS Code 常用插件整理相关推荐

最新文章

热门文章