2021-03-15发表2023-01-10更新 Sea Tools21 分钟读完 (大约3111个字)0次访问

vs-code“实用插件”

在使用vs-code时，整理了一些好用的vs-code插件分享。

基础必备

Chinese

vscode编辑器汉化包，安装后，在 locale.json 中添加 "locale": "zh-cn"，即可载入中文（简体）语言包。

Auto Rename Tag

自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。

Auto Close Tag

自动闭合HTML/XML标签

HTML Snippets

HTML 代码片段，该插件可为你提供 html 标签的代码提示，不用键入尖括号了。

Bracket Pair Colorizer

该插件可以为你把成对的括号做颜色区分，并且提供一根连接线。方便我们审阅代码结构。

CSS Peek

css 样式查看器，可快速查看我们的 css 样式，非常方便快捷。

Npm Intellisense

可自动完成导入语句中的 npm 模块。

open in browser

快速打开html文件到浏览器预览。

Debugger for Chrome

调试工具，必装；具体使用查看官网

vscode-icons

提供了非常漂亮的目录树图标主题。

Material Icon Theme

提供了非常漂亮的目录树图标主题。（这款最爱。

Atom One Dark Theme

One Dark Theme based on Atom。

Dracula Official

吸血鬼主题。

Screenshot

Path Intellisense

自动提示文件路径，支持各种快速引入文件。

Image preview

鼠标悬浮在链接上可及时预览图片。

Highlight Matching Tag

点击某 Tag 时对应的 Tag 下会有下划线标示，比较实用；

Beautify

在代码文件右键鼠标一键格式化 html,js,css

JavaScript (ES6) code snippets

ES6 语法智能提示，以及快速输入。

Vetur

VScode官方钦定 Vue 插件，Vue开发者必备。内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能。

indent-rainbow

用颜色填充缩进，非常直观，如果有缩进错误还会变成红色。（对写 Nim or Python 用处极大。

Example

代码风格规范

Prettier - Code formatter

Prettier 是一个“有态度”的代码格式化工具。，prettier支持我们大前端目前大部分语言处理，包括JavaScript 、Flow、 TypeScript 、CSS 、SCSS 、Less 、JSX 、Vue 、GraphQL 、JSON 、Markdown

ESlint

规范 js 代码书写规则，如果觉得太过严谨，可自定义规则。

Code Spell Checker

是拼写检查程序，检查不常见的单词，如果单词拼写错误，会给出警告提示。

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言，功能强大，灵活方便，文档齐全，食用简单！

Better Align

代码书写的整洁，工整往往是衡量一个程序员素养的标准，这款插件可以让你的代码更排版优雅。

change-case

通常我们对一个变量的命名可能是驼峰，可能是全大写，又或是下划线，这里可通过这个插件解决变量命名规范的问题。

选中变量配合组合键[Command+Shift+p]，输入对应格式即可。

extension.changeCase.commands：列出所有“更改案例”命令，如果仅选择一个单词，则带有预览
extension.changeCase.camel：更改大小写'camel'：转换为字符串，并用下一个字母大写表示分隔符
extension.changeCase.constant：更改大小写“常量”：转换为大写字母，下划线分隔字符串
extension.changeCase.dot：更改大小写的“点”：转换为小写，句点分隔的字符串
extension.changeCase.kebab：更改大小写“ kebab”：转换为小写字母，用破折号分隔的字符串（参数名的别名）
extension.changeCase.lower：更改大小写为“小写”：转换为小写的字符串
extension.changeCase.lowerFirst：更改大小写“ lowerFirst”：转换为首字母小写的字符串
extension.changeCase.no：转换没有任何大小写的字符串（小写字母，空格分隔）
extension.changeCase.param：更改大小写为'param'：转换为小写字母，用破折号分隔的字符串
extension.changeCase.pascal：更改大小写“ pascal”：转换为以与camelCase相同的方式表示的字符串，但首字母也大写
extension.changeCase.path：更改大小写的“路径”：转换为小写，用斜杠分隔的字符串
extension.changeCase.sentence：更改大小写的“句子”：转换为小写的空格分隔的字符串
extension.changeCase.snake：更改大小写“ snake”：转换为小写字母，下划线分隔字符串
extension.changeCase.swap：更改大小写“交换”：转换为每个大小写相反的字符串
extension.changeCase.title：更改大小写“标题”：转换为以空格分隔的字符串，每个单词的第一个字符均大写
extension.changeCase.upper：更改大小写为大写：转换为大写字符串
extension.changeCase.upperFirst：更改大小写为“ upperFirst”：转换为首字母大写的字符串

Better Comments

丰富注释颜色，让注释也具有生命力，如需自定义样式，需要写入配置代码。

配置代码
"better-comments.tags": [
  {
    "tag": "*",
    "color": "#98C379",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]
使用
// * 绿色的高亮注释