Vscode常用插件
- 一、安装位置指引
- 二、常用代码插件
- ☆auto close tag
- ☆Auto Comment Blocks
- ☆Auto Rename Tag
- ☆Beautify
- ☆Code Spell Checker
- ☆Debugger for Chrome
- ☆ESLint
- ☆ filesize
- ☆ Git History
- ☆ GitLens — Git supercharged
- ☆IntelliSense for CSS class names in HTML
- ☆Image preview
- ☆JavaScript (ES6) code snippets
- ☆JavaScript Snippet Pack
- ☆language-stylus
- ☆stylelint
- ☆ Node.js Modules Intellisense
- ☆ Open in Browser
- ☆ Path Intellisense
- 三、好用代码插件
- 四、Markdown相关插件
- 五、其他插件
- 六、vue常用
- 七、一些好看的主题插件
一、安装位置指引
二、常用代码插件
☆auto close tag
标签自动和提示。
☆Auto Comment Blocks
自动插入注释行
☆Auto Rename Tag
自动重命名配对的HTML / XML标记
☆Beautify
格式化代码
☆Code Spell Checker
代码拼写检查工具
☆Debugger for Chrome
从VS Code调试在Google Chrome中运行的JavaScript代码。
☆ESLint
代码检查工具
☆ filesize
实时查看当前文件的大小
☆ Git History
查看git历史与log,搜索等(包括git log)
☆ GitLens — Git supercharged
GitLens只是帮助您更好地理解代码。快速浏览一下,为什么以及何时更改了行或代码块。
跳过历史记录,以获得有关代码演变的方式和原因的进一步见解
☆IntelliSense for CSS class names in HTML
CSS 类名智能提示,可以在html与css中进行智能提示
☆Image preview
在左侧可以预览图片和悬停中显示图片
☆JavaScript (ES6) code snippets
ES6的代码片段
☆JavaScript Snippet Pack
JS代码片段补全
☆language-stylus
Stylus文件添加语法高亮
☆stylelint
美化css代码
☆ Node.js Modules Intellisense
在import语句中自动完成Node.js模块
☆ Open in Browser
在vscode中打开浏览器访问
☆ Path Intellisense
自动路径补全
三、好用代码插件
☆Pug (Jade) snippets
pug语法提示
☆ Scss
缩进Sass语法高亮
☆Vetur
代码格式化
☆vscode-element-helper
element代码自动补全
☆vscode-icons
在vscode显示文件图标
☆Codelf
通过搜索GitHub, Bitbucket, GitLab来找到真实的使用变量名,
为你提供一些高频使用的词汇,同时为你标明使用的语言、代码链接。
☆local history
修改代码之后想找回历史代码怎么办?安装这款插件之后在侧边栏会出现LOCAL HISTORY的字样,
每当我们保存更改时,它都会备份一份历史文件,当我们需要恢复之前版本时,
只需要点击一下对应的文件即可。此外,它还会在编辑框显示对比详情,能够让你对修改位置一目了然。
☆TODO Tree
给代码一个标记,后续定位到某块需要修改/完善的代码。
TODO Tree不仅可以实现标签高亮,还可以在活动栏添加一个选项卡,
它能够以不同视图展示我们标记的位置,单击对应标签就能够快速定位到指定位置
☆Bracket Pair Colorizer
Bracket Pair Colorizer这款插件可以给()、[]、{}这些常用括号显示不同颜色,
当点击对应括号时能够用线段直接链接到一起,让层次结构一目了然。除此之外,它还支持用户自定义符号。
☆Better Align
主要用于代码的上下对齐。
它能够用冒号(:)、赋值(=,+=,-=,*=,/=)和箭头(=>)对齐代码。
使用方法:Ctrl+Shift+p输入“Align”确认即可。
☆ change-case
不同语言对变量名、函数名、类名的命名要求不同,有的是驼峰、有的是下划线.
但是,不管是什么要求,都有一个共性--命名很重要。
有些编程语言甚至对命名严格到如果不按规范要求,执行时会直接报错。
而change-case就是一款快速修改当前选定内容或当前单词的命名的插件。
使用方法:Ctrl+Shift+p输入“change”然后选择要修改的格式即可。
四、Markdown相关插件
☆ Markdown All in One
用于书写Markdown笔记。
markdown笔记插件
可使用Alt+Shift+F格式化markdown表格
☆ Markdown Preview Enhanced:
markdown预览
☆ Markdown Image:
图床插件, 支持coding
五、其他插件
☆ windows opacity
设置vscode透明背景
☆Html Snippets
实用的H5代码片段及提示
☆Html CSS Support
实用的H5代码片段及提示
☆ Chinese:
使vscode显示为中文
六、vue常用
☆Vetur
语法高亮、智能感知、Emmet等
☆VueHelper
snippet代码片段
☆Import Cost
引入包大小计算,对于项目打包后的体积掌握。
七、一些好看的主题插件
☆
One Dark Pro
Dracula
Material