VSCode插件

VSCode插件

[toc]

Auto Rename Tag

• 自动修改闭合HTML / XML标签的名字

Auto Close Tag

• 自动闭合HTML / XML标签

Prettier - Code formatter

• 格式化插件。有的人可能会推荐 Beautify。我原来也是一直用这个，后来发现这个并不能格式化 React 的代码。所以果断换成 Prettier

Bracket Pair Colorizer

• 给嵌套的各种括号加上不同的颜色

Settings Sync

ESLint

• 代码静态检视（如果要让vue文件能ESLint，需npm install eslint-plugin-html） 配置vscode实现对.vue .html文件中的js代码段的检测
• 顶部选项Code -> 首选项 -> 设置，搜索编辑“eslint.validate”添加 "html","vue"! "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ]

Path Intellisense

• 文件路径自动补全

Vetur

• 语法高亮、智能感知、Emmet等, 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

Vue 3 Snippets

stylelint

• CSS / SCSS / Less 语法检查

Bootstrap 3 Snippets

• 创建一个新的HTML文档并键入'bs3'以查看所有可用的代码片段。

vscode-icons

• 改变编辑器里面的文件图标

Live Server

• 一个为静态和动态页面启动具有实时重新加载功能的开发本地服务器

Chinese (Simplified) Language Pack for Visual Studio Code

Code Runner

Color Info

CSS Peek

• 定位 CSS 类名

css-auto-prefix

• 自动添加 CSS 私有前缀

Icon Fonts

• 添加字体图标

HTML CSS Support

HTML Snippets

JavaScript (ES6) code snippets

jQuery Code Snippets

Document This

在函数上按下ctrl + alt + d ，自动生成注释 ，可配置

vscode-fileheader

添加注释到文件头，并支持自动更新文件修改时间。

open in browser

Minify

• 压缩 HTML、CSS、JS 代码

• 在文件右键 可以选择在浏览器预览

markdownlint

Markdown Preview

• 实时预览 markdown

:emojisense:

快速挑选 Markdown 中的 Emoji

carbon-now-sh

• 将代码分享为图片（图片的格式可以为 png 和 svg）

SVG View

• 预览 SVG

Image preview

左侧显示图片预览 ,有用不解释,自动识别代码中的图片 ,在左侧显示图片预览

Codelf

• Codelf 是一个用来给变量命名的网站，你只要输入你想起的中文名，它就会给你提供很多建议的命名

Turbo Console Log

• 快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log

ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log

Change Case

• 转换命名风格,驼峰等

GitLens

• 详细的 Git 提交日志

vscode-json

• 处理 JSON 文件

Regex Previewer

• 实时预览正则表达式的效果

TODO Highlight

• 高亮 TODO，FIXME、还可以自己配置要高亮的关键字。

px to rem

像素转 rem

code spell checker

对基本关键字拼写校验

filesize

安装后左下角有显示文件大小，点击可以查看详情

VSCode Counter

安装插件后右键文件目录,统计你写了多少代码 ,分别是什么文件