基础必备插件
- Chinese (Simplified) Language Pack for Visual Studio Code
让软件显示为简体中文语言。
- Prettier:代码格式化
Prettier 是一个代码格式化工具,只关注格式化,但不具备校验功能。在一个多人协同开发的团队中,统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格,提高代码的可读性和统一性。自然维护性也会有所提高。
- ESLint:代码格式校验
日常开发中,建议用可以用 Prettier 做代码格式化,然后用 eslint 做校验。
- Beautify
代码格式化工具。
Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整,代码强迫症必备,较好的代码格式在后期维护以及他人阅读时都会有很多的便利。
插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。
- Auto Close Tag、Auto Rename Tag
自动闭合标签、自动对标签重命名。
js,css相关插件
- open in browser
安装open in browser插件后,在 HTML 文件中「右键选择 --> Open in Default Browser」,即可在浏览器中预览网页。
- Live Server
在本地启动一个服务器,代码写完后可以实现「热更新」,实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。
使用方式:安装插件后,开始写代码;代码写完后,右键选择「Open with Live Server」。
- JavaScript(ES6) code snippets
ES6 语法智能提示,支持快速输入。
- CSS Peek
增强 HTML 和 CSS 之间的关联,快速查看该元素上的 CSS 样式。
vue相关插件
- Vetur
Vue 多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。VS Code 官方钦定 Vue 插件,Vue 开发者必备。
- Vue CSS Peek
CSS Peek 对 Vue 没有支持,该插件提供了对 Vue 文件的支持。
- Vue VSCode Snippets
vue补全
- Element UI Snippets
Element UI补全
react相关插件
- ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/react-router 的语法智能提示。
小程序,app相关插件
- minapp:小程序支持
小程序开发必备插件。
Markdown相关插件
- Markdown Preview Github Styling
以 GitHub 风格预览 Markdown 样式,十分简洁优雅。就像下面这样,左侧书写 Markdown 文本,右侧预览 Markdown 的渲染效果:
- Markdown Preview Enhanced
预览 Markdown 样式。
VS Code 配置相关插件
- Settings Sync
地址:https://github.com/shanalikhan/code-settings-sync
作用:多台设备之间,同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具。
- vscode-syncing
地址:https://github.com/nonoroazoro/vscode-syncing
作用:多台设备之间,同步 VS Code 配置。
其他推荐插件
- GitLens
Git 神器,码农必备。
- highlight-icemode:选中相同的代码时,让高亮显示更加明显
VSCode 自带的高亮显示,实在是不够显眼。用插件支持一下吧。
所用了这个插件之后,VS Code 自带的高亮就可以关掉了:
在用户设置里添加"editor.selectionHighlight": false即可。
参考链接:vscode 选中后相同内容高亮插件推荐
- TODO Highlight(备忘插件)
写代码过程中,突然发现一个 Bug,但是又不想停下来手中的活,以免打断思路,怎么办?按照代码规范,我们一般是在代码中加个 TODO 注释。比如:(注意,一定要写成大写TODO,而不是小写的todo)
//TODO:这里有个bug,我一会儿再收拾你
- javascript console utils:快速打印 log 日志
安装这个插件后,当我们按住快捷键「Cmd + Shift + L」后,即可自动出现日志 console.log()。简直是日志党福音。
当我们选中某个变量 name,然后按住快捷键「Cmd + Shift + L」,即可自动出现这个变量的日志 console.log(name)。
其他的同类插件还有:Turbo Console Log。
不过,生产环境的代码,还是尽量少打日志比较好,避免出现一些异常。
- Local History
维护文件的本地历史记录,强烈建议安装。代码意外丢失时,有时可以救命。
- 必备调试工具 Debugger for Chrome
此工具简直就是前端开发必备,将大大地改变你的开发与调试模式。
以往的前端调试,主要是 JavaScript 调试,你需要在 Chrome 的控制台中找到对应代码的部分,添加上断点,然后在 Chrome 的控制台中单步调试并在其中查看值的变化。
而在使用了 Debugger for Chrome 后,当代码在 Chrome 中运行后,你可以直接在 VSCode 中加上断点,点击运行后,Chrome 中的页面继续运行,执行到你在 VSCode 中添加的断点后,你可以直接在 VSCode 中进行单步调试。
- 代码拼写检查 Code Spell Checker
此插件安装后就不用管就好了,在你代码中有单词拼写错误时,你就会发现它的好处,因为我们写代码毕竟都是大量的英文单词变量定义,插件还可以给出错误拼写单词的建议。
- Highlight Matching Tag标签高亮
- path autocomplete:路径智能补全