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 快捷键


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

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

目录
相关文章
|
6天前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
14 0
|
6天前
|
人工智能 自然语言处理 算法
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
国产新型AI编程助手—DevChat AI插件在VSCode中的应用
107 0
|
6天前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
6天前
|
前端开发
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
|
6天前
|
人工智能 JavaScript 程序员
Fitten Code:在VSCode插件市场备受欢迎的原因是什么?
随着AI技术的不断发展,AI在编写代码方面的能力也日益强大。充分利用AI的能力能够显著提高代码编写的效率和质量。今天我将向大家介绍一款备受瞩目的AI代码神器——Fitten Code,让我们一同揭开它神秘的面纱!
317 3
|
6天前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
20 0
|
6天前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
19 0
|
6天前
|
JavaScript 开发工具 git
【Vscode】 Vscode常用插件
【Vscode】 Vscode常用插件
59 0
|
6天前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
|
6天前
|
NoSQL 关系型数据库 开发工具
最新最全 VSCODE 插件推荐(2023版)
最新最全 VSCODE 插件推荐(2023版)
147 0