200531更新
- HTML Snippets:link+Tab直接引入css
- HTML CSS Support:
- CSS Modules:对使用了css modules的jsx标签的类名补全和跳转到定义位置
- vscode 自动整理所有引用import 不依赖插件:
settings.json中加入配置项: “editor.codeActionsOnSave”: { “source.organizeImports”: true }, - cssrem:px转rem
- image preview:显示图片浏览的插件
- JS Refactor:
- JavaScript Booster:把var转为const或者let,去除多余的else语句,合并声明和初始化。
- code-spell-checker:
- js doc
/**
写注释Ctrl+Shift+D
- JavaScript Snippets
JS代码片段补全 - JavaScript (ES6) code snippets
ES6的代码片段
React插件
- Reactjs code snippets
- React Redux ES6 Snippets
- React-Native/React/Redux snippets for es6/es7
- JavaScript (ES6) code snippets(es6代码片段)
- Typescript React code snippets
- npm Intellisense
插件
-
插件搜索:
ctrl + shift + x
或
-
Path Auto Complete
自动补全路径 -
js doc
使用/**
写注释
或自己设置快捷键。有关快捷键的设置点击VScode快捷键介绍
个人设置:Ctrl+Shift+D
效果如图:
-
JavaScript Snippets
JS代码片段补全【与HTML/CSS的Emmet语法有些类似】
具体语法了解点击 JS快速输入介绍 -
JavaScript (ES6) code snippets
ES6的代码片段 -
Python
提供了代码分析,高亮,规范化等很多基本功能 -
vscode-icons
各种漂亮图标,方便找不同文件
-
filesize
左下角显示文件大小的插件 -
Bracket Pair Colorizer
成对的彩色括号
-
※Settings Sync
可以同步 VS Code设置同步到 GitHub 账号,包括 setting 文件和插件设置。
重新配置VS Code的时候只需同步一下即可。
安装好插件后,在插件页面登录自己的GitHub账号即可。
我不需要配置gist,但不排除需要配置gist的。待更新。- Upload Your Settings
Press Shift + Alt + U - Download your Settings
Press Shift + Alt + D
- Upload Your Settings
-
Atom-Material
一款安卓风的颜色主题,推荐使用推荐的字体设置。
"editor.fontSize": 16, "editor.fontWeight": "400", "editor.lineHeight": 24, "editor.letterSpacing": 0.5
-
Import Cost
在行尾显示导入的包的大小 -
Indent-Rainbow
带颜色的缩进
-
GitLens
能显示每一行代码的作者以及提交时间。 -
Git history
Git 历史 -
Color Highlight
直观显示在 css/web 中定义的颜色
-
Quokka.js
实时执行 JavaScript 代码(做快速的 demo 很有用) -
Code Runner
立刻运行代码 -
Vetur
Vue 工具插件 -
Live server
实时显示网页情况 -
Python indent
自动纠正 Python 缩进 -
TODO Highlight
高亮显示备注中的 TODO 事项,推荐配合 第19个插件, Todo Tree 使用
在要做的事情上写 TODO: 大写、英文冒号
-
Todo Tree
点击左侧栏“树”的logo,显示 TODOList 条目,点击相应的条目,可以打开文件并定位到 TODO 行 -
Auto Close Tag
自动写关闭标签的插件 -
Auto Rename Tag
自动重命名关闭标签 -
Polacode
代码段生成图片
复制代码——Ctrl+Shift+P——在框中输入> polacode——窗口粘贴代码——点击图标保存图片——右下角调整大小
-
Guides
比 VS Code自带的更好的参考线,可自定义 -
Color Info
显示css中的颜色属性信息 -
Regex Previewer
正则结果预览插件 -
Mithril Emmet
高效编写 HTML、CSS 代码的插件,能快速输入大部分内容
比如,在编辑 HTML 文件时,输入tr*2>td*3
,然后回车,就能快速生成一个两行三列的表格标签。
Emmet语法 + Tab键 -
vscode color picker
-
js doc
-
JavaScript Snippet Pack
-
jQuery Code Snippets