VS code 常用插件推荐(总结整理篇)

简介: vscode 是微软开发的的一款代码编辑器,就如官网上说的一样,vscode 重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom 这几种。比起 notepad++、editplus,vscode 集成了许多 IDE 才具有的功能,比起它们更像一个代码编辑器;比起 sublime,vscode 颜值更高,安装配置插件更为方便;比起 atom,vscode 启动速度更快,打开各种大文件不卡。可以说,vscode 既拥有高自由度、又拥有高性能和高颜值

简介

vscode 是微软开发的的一款代码编辑器,就如官网上说的一样,vscode 重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom 这几种。比起 notepad++、editplus,vscode 集成了许多 IDE 才具有的功能,比起它们更像一个代码编辑器;比起 sublime,vscode 颜值更高,安装配置插件更为方便;比起 atom,vscode 启动速度更快,打开各种大文件不卡。可以说,vscode 既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode 还是一款免费并且有团队持续快速更新的代码编辑器。可以说,vscode 是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择 vscode,IDE 选择 WebStorm。vscode 安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启 vscode 使得插件生效。


网络异常,图片无法展示
|

1、Chinese (Simplified) Language Pack for Visual Studio Code.


网络异常,图片无法展示
|


此中文(简体)语言包为 VS Code 提供本地化界面。安装后,在 locale.json 中添加 “locale”: “zh-cn”,即可载入中文(简体)语言包。要修改 locale.json,你可以同时按下 Ctrl+Shift+P 打开命令面板,之后输入 “config” 筛选可用命令列表,最后选择配置语言命令。

可以将编译器汉化。非常适合英文不好的同学。

2.Code Debugger


网络异常,图片无法展示
|


无需配置 launch.json 即可进行单文件调试,点击右上角虫子图标或者右键菜单都可以。

支持 JS、TS、Python、Dart、Coffeescript、Go、C/C++、Rust、Bash、Lua。

3.Debugger for Chrome


网络异常,图片无法展示
|

支持谷歌浏览器调试 bug

4.ES7 React/Redux/GraphQL/React-Native snippets  


网络异常,图片无法展示
|

在 VS Code 中支持 React Native,React,Redux 常见代码片段的插件.

5.ESLint


网络异常,图片无法展示
|

ESLint 是一个代码规范和错误检查工具,所有东西都是可以插拔的。你可以调用任意的 rule api 或者 formatter api 去打包或者定义 rule or formatter。任意的 rule 都是独立的。没有特定的 coding style,你可以自己配置。

6.GitLens — Git supercharged


网络异常,图片无法展示
|

GitLens 一个很厉害的 vscode 的 git 插件,支持在编译器终端 git 各种操作。

7.HTML CSS Support


网络异常,图片无法展示
|

在编写样式表的时候,自动补全功能大大缩减了编写时间。

8.JavaScript (ES6) code snippets


网络异常,图片无法展示
|

支持 ES6 语法提示。

9.Mithril Emmet


网络异常,图片无法展示
|

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大的提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。VsCode 内置了 Emmet 语法,在后缀为.html/.css 中输入缩写后按 Tab 键即会自动生成相应代码.

10.Path Intellisense


网络异常,图片无法展示
|

路径提示插件。

11.Prettier - Code formatter


网络异常,图片无法展示
|

对代码进行快速格式化。

12.Vue 3 Snippets


网络异常,图片无法展示
|

这是一款在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你的开发效率。

13.VueHelper


网络异常,图片无法展示
|

vscode 最好的 vue 代码提示插件,不仅包括了 vue2 所有 api,还含有 vue-router2 和 vuex2 的代码提示.(此插件作者已转行做影视,可以使用 Vue 3 Snippets,如果不使用本插件)。

VS code 快捷键


网络异常,图片无法展示
|

好啦,本期内容就分享到这里,我们下期见!

目录
相关文章
|
3月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
227 1
|
25天前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
214 3
|
28天前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
59 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
3月前
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
128 5
vscode10大常用插件
|
2月前
|
人工智能 C++ 开发者
verilog vscode 与AI 插件
【9月更文挑战第11天】在Verilog开发中,使用Visual Studio Code(VS Code)结合AI插件能显著提升效率。VS Code提供强大的编辑功能,如语法高亮、自动补全和代码格式化;便捷的调试功能,支持多种调试器;以及丰富的插件生态。AI插件则可自动生成代码、优化现有代码、检测并修复错误,还能自动生成文档。常用插件包括Verilog AI Assistant和Verilog Language Server,可根据需求选择合适的工具组合,提高开发效率和代码质量。
122 2
|
3月前
|
前端开发 IDE 开发工具
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
OpenSumi问题之OpenSumi 对于 VS Code 插件生态要如何支持
|
3月前
|
JSON 前端开发 JavaScript
这 2 个插件,让你的 vscode更牛逼
这 2 个插件,让你的 vscode更牛逼
|
3月前
vscode——Prettier插件保存自动格式化
vscode——Prettier插件保存自动格式化
165 0
|
3月前
|
JavaScript Linux iOS开发
【Mac系统】Vscode使用LeetCode插件报错‘leetcode.toggleLeetCodeCn‘ not found
在Mac系统下使用VSCode的LeetCode插件时遇到“leetcode.toggleleetcodecn”命令找不到的错误解决方法,主要是通过从Nodejs官网下载并安装最新版本的Node.js来解决环境配置问题。
221 0
|
4月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
273 3