Better Comments

代码注释高亮效果

image.png

配置
**

  1. "better-comments.tags": [
  2.   {
  3.     "tag": "!",
  4.     "color": "#FF2D00",
  5.     "strikethrough": false,
  6.     "underline": false,
  7.     "backgroundColor": "transparent",
  8.     "bold": false,
  9.     "italic": false
  10.   },
  11.   {
  12.     "tag": "?",
  13.     "color": "#3498DB",
  14.     "strikethrough": false,
  15.     "underline": false,
  16.     "backgroundColor": "transparent",
  17.     "bold": false,
  18.     "italic": false
  19.   },
  20.   {
  21.     "tag": "//",
  22.     "color": "#474747",
  23.     "strikethrough": true,
  24.     "underline": false,
  25.     "backgroundColor": "transparent",
  26.     "bold": false,
  27.     "italic": false
  28.   },
  29.   {
  30.     "tag": "todo",
  31.     "color": "#FF8C00",
  32.     "strikethrough": false,
  33.     "underline": false,
  34.     "backgroundColor": "transparent",
  35.     "bold": false,
  36.     "italic": false
  37.   },
  38.   {
  39.     "tag": "*",
  40.     "color": "#98C379",
  41.     "strikethrough": false,
  42.     "underline": false,
  43.     "backgroundColor": "transparent",
  44.     "bold": false,
  45.     "italic": false
  46.   }
  47. ]

Rainbow Fart

**

官网


VSCode Rainbow Fart** 是一个在你编程时持续夸你写的牛逼的扩展，可以根据代码关键字播放贴近代码意义的真人语音。

Auto Rename Tag

重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签

配置

添加条目到自动重命名标签 activationOnLanguage 设置扩展将被激活的语言。默认情况下，它是[““]，将对所有语言激活。
*
设置 -> 扩展 -> Auto Rename Tag configuration -> 在 settings.json 中编辑

  1. {
  2.   "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
  3. }

**

Ayu

ayu 是一个 vscode 主题

Dark
image.png

Light
image.png

Mirage
image.png

Bracket Pair Colorizer 2

高亮括号

image.png

配置**

  • 定义用于给括号上色的颜色

    1. // settings.json
    2. {
    3. "bracket-pair-colorizer-2.colors": [
    4.   "Gold",
    5.   "Orchid",
    6.   "LightSkyBlue"
    7.   ] 
    8. }

  • 颜色模式

不同的括号是否共享一个颜色组
image.png
VSCode 扩展 - 图7VSCode 扩展 - 图8

  • 是否显示范围线

image.png

Chinese Language Pack

适用于 VS Code 的中文语言包

配置

安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。要修改 locale.json，你可以同时按下 Ctrl+Shift+P 打开命令面板，之后输入 “config” 筛选可用命令列表，最后选择配置语言命令。

CodeIf

输入中文给出一些变量命名建议

使用
**

详细教程

**
选中文本 -> 右键单击 -> 选择“CodeIf”
image.png

JS & CSS Minifier

一个 JavaScript 和 CSS 压缩工具

使用

  1. 在文件中单击右键 -> Minify: Document
  2. 点击右下角 Minify
  3. CTRL+SHIFT+P 来运行 Minify: Document

**

Live Sass Compiler

将 Sass 或 Scss 实时编译为 CSS

详细教程

使用

  1. Watch Sass 从状态栏单击以打开实时编译，然后 Stop Watching Sass 从状态栏单击以打开实时编译。
  2. 按 F1 或 ctrl+shift+P 键入 Live Sass: Watch Sass 以开始实时编译，或者按键入 Live Sass: Stop Watching Sass 以停止实时编译。
  3. 按 F1 或 ctrl+shift+P 键入一次 Live Sass: Compile Sass - Without Watch Mode 以编译 Sass 或 Scss。

Live Server

打开一个本地服务器

使用

  1. 右键单击文件名 -> Open with Live Server
  2. 文件中右键单击 -> Open with Live Server
  3. 右下角状态栏中单击 Go live（需要配置文件）

  4. 快捷键


    配置

    Comment Translate

    **
    翻译，支持不同语言，单行、多行，驼峰

使用

选中翻译
image.png

Vetur+ESLint+Prettier

具体配置

Vetur

  • 代码高亮
  • 代码片段
  • 格式化代码
  • ……
  • 只能作用于 *.vue 文件

ESLint

  • ECMAScript/JavaScript 代码检测工具
  • 在使用 vue 脚手架创建项目的时候会选择是否安装
  • 配合 Prettier 使用

Prettier

  • 代码格式化工具
  • JavaScript
  • CSS、LESS 和 SCSS
  • TypeScript
  • ……

JavaScript (ES6) code snippets

ES6 代码片段提示

支持的语言（扩展名）

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue

片段
**
以下是所有可用代码段以及每个代码段的触发器的列表。 ⇥ 表示 TAB 键。

Trigger Content
imp→ imports entire module import fs from 'fs';
imn→ imports entire module without module name import 'animate.css'
imd→ imports only a portion of the module using destructing import {rename} from 'fs';

Vue VSCode Snippets

提供了 Vue 代码提示、一些模板、脚本、代码片段等等
1.gif

SVG Viewer

SVG 图片工具

  • 转换为 PNG 格式
  • 复制 data url
  • 以 png 格式在编译器中打开

VSCode 扩展 - 图13