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
安装插件后右键文件目录,统计你写了多少代码 ,分别是什么文件