关键词:
作者:望道同学
原文:https://juejin.cn/post/6981651362559836190
VSCode 是微软开发的的一款代码编辑器,就如官网上说的一样:
VSCode 重新定义了代码编辑器
VScode 已经自带了很多丰富的功能, 如果想要更多功能?就需要装VSCode扩展[1]. 比如: 添加新语言、主题、调试器并连接到其他服务等功能。
下面我们就来看看 15 款实用的 VScode 扩展
外观配置
VSCode 汉化工具🎈
Chinese (Simplified) Language Pack for Visual Studio Code[2]是一款适用于 VS Code 的中文(简体)语言包插件。
安装之后一秒汉化 VS code ,再也不用担心看不懂英文😁。
VSCode 主题
One Dark Pro🎆
umijs
框架引领者-云谦老师
推荐的VSCode 主题
可以发现,One Dark Pro
主题看起来更加柔顺,更加护眼
给文件/文件夹设置图标
给文件/文件夹设置图标的扩展,可以让你的项目文件类型一目了然
推荐以下两款,任选其一:
Material Icon Theme[3]
vscode-icons[4]
Material Icon Theme🎇
安装启用后,打开VSCode的命令面板:
mac的快捷键是
shift+command+p
在命令面板中输入Material Icon Theme
并选择它,就可以设置文件及文件夹的icon了
vscode-icons🧨
安装启用后,打开VSCode的命令面板:
mac下的快捷键是
shift+command+p
在命令面板中输入vscode-icons
并选择它,就可以设置文件及文件夹的icon了
效果对比
代码风格检查
ESLint✨
ESLint[5] 配置配合 ESLint 命令
可以帮助我们找出有问题的编码模式或不符合规则的代码。
ESLint 配置与ESLint 的 VSCode 扩展[6] 结合使用可以自动
帮助我们找出有问题的编码模式或不符合规则的代码
有关 ESLint 的详细讨论可以查看这篇文章[7]
ESLint 如何配置 可以参考这篇文章-企业级前端开发规范如何搭建 🛠[8]
ESLint 配置好之后,我们接下来看看启用/禁用 ESLint 扩展的效果
禁用 ESLint 扩展的效果
禁用 ESLint 扩展时,当我们编写不符合 ESLint 规范的代码时,只有启动项目或执行 ESLint 命令才会报错:
执行 ESLint 命令`才能检查代码错误:
启用 ESLint 扩展的效果
开启 ESLint 扩展时,当我们编写不符合 ESLint 规范的代码时,代码中会自动出现警告/报错:
Prettier🎉
Prettier[9] 是一个代码格式化的工具.某些与代码校验有关的规则(例如,语句末尾是否加分号)就可以由 Prettier
自动处理。
Prettier 的 VSCode 扩展[10] 可以帮助我们找出有问题的编码模式或不符合规则的代码
有关
Prettier
的详细讨论可以查看这篇文章[11]Prettier 如何配置 可以参考这篇文章-企业级前端开发规范如何搭建 🛠[12]
接下来我们做一个小demo来体验一下Prettier的效果
1. 初始化项目+安装Prettier依赖
$ npm init -y
$ yarn add prettier
复制代码
新建一个index.js
并加入如下内容
const a = "a"
function test()
return "666"
const demo = data =>
return data;
复制代码
新建.prettierrc.js
并加入如下内容
module.exports =
// 超过最大值换行
"printWidth": 100,
// 行末是否加分号
"semi": true,
// 用单引号代替双引号
"singleQuote": true,
// tab键宽度,默认为2
"tabWidth": 2,
// 最后一个对象元素加逗号
"trailingComma": "all",
// 对象,数组加空格
"bracketSpacing": true,
// jsx > 是否另起一行
"jsxBracketSameLine": false,
// (x) => 是否要有小括号
"arrowParens": "always",
// 是否要注释来决定是否格式化代码
"requirePragma": false,
// 是否要换行
"proseWrap": "preserve"
复制代码
2. 安装Prettier扩展
3. 修改VSCode的setting.json
文件
"[javascriptreact]":
"editor.defaultFormatter": "esbenp.prettier-vscode"
,
"[javascript]":
"editor.defaultFormatter": "esbenp.prettier-vscode"
,
"editor.formatOnSave": true,
复制代码
在上面的代码帮我们实现了以下功能
将
react
和JavaScript
的格式化方式都设置为prettier
方式在保存时自动格式化代码
3. 格式化效果验证
最后,我们修改index.js
的任意内容然后点击保存。我们可以发现代码已经被自动格式化为.prettierrc.js
中要求的格式了
// 使用单引号替换双引号
const a = 'a';
function test()
return '666';
// 给箭头函数的参数加上括号
const demo = (data) =>
return data;
;
复制代码
EditorConfig🎊
EditorConfig[13] 有助于维护跨多个编辑器和 IDE 从事同一项目的多个开发人员的一致编码风格,团队必备神器。
在多人合作的项目中,每个人的开发习惯是不同的。以缩进来说,有的人习惯使用 space
键来进行缩进,有的人喜欢用 tab
键,有的人喜欢设置缩进为 4
个空格,有的人喜欢设置为 2
个空格。这样产生的后果就是每个人修改后的代码在格式上总是不统一的,那么提交到 git
上就会代码风格不一致,变得丑陋无比。
我们使用EditorConfig后,就可以保持统一。比如:
统一代码缩进风格是
space
键还是tab
键是否删除行尾的空格
设置换行符类型,值为
lf
、cr
和crlf
......
注意:
.editorconfig
或覆盖.prettierrc.js
的配置,为了避免混淆。请务必保证二者的的格式化方式一致
EditorConfig 的 VSCode 扩展[14] 可以帮助我们找出有问题的编码模式或不符合规则的代码
有关 EditorConfig 的详细讨论可以查看这篇文章[15]
EditorConfig 如何配置 可以参考这篇文章-企业级前端开发规范如何搭建 🛠[16]
接下来我们做一个小demo体验一下EditorConfig 的效果
1. 安装editorconfig 的扩展
2. 添加.editorconfig
在项目根目录添加.editorconfig
并加入如下内容
# http://editorconfig.org
root = true
[*]
indent_style = tab
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
复制代码
在上面配置文件中:
indent_style
:表示缩进风格是 tab键还是space-空格键indent_size
:缩进大小2end_of_line
:换行符lfcharset
:字符集utf-8trim_trailing_whitespace
:是否删除行尾的空格insert_final_newline
:是否在文件的最后插入一个空行
3. 格式化效果验证
任意修改
.editorconfig
文件中的indent_size
属性值。修改项目的JS文件后保存代码,观察是否有变化
stylelint🎃
stylelint[17]是一个 css
规范校验工具,也支持 less
等 css
预处理器。有关 stylelint
的详细讨论可以查看这篇文章[18]
stylelint 的 VSCode 扩展[19] 可以帮助我们找出有问题的编码模式或不符合规则的代码
有关 stylelint 的详细讨论可以查看这篇文章[20]
stylelint 如何配置 可以参考这篇文章-企业级前端开发规范如何搭建 🛠[21]
接下来我们做一个小demo体验一下 stylelint 的效果
1.安装扩展
2. 项目初始化
$ npm init -y
复制代码
3. 安装依赖
yarn add stylelint stylelint-config-standard --dev
复制代码
4. 添加.stylelintrc.js
文件
在项目根目录添加.stylelintrc.js
文件并加入如下内容
module.exports =
extends: 'stylelint-config-standard',
rules:
// your rules
,
// 忽略其他文件,只校验样式相关的文件
ignoreFiles: [
'node_modules/**/*',
'public/**/*',
'dist/**/*',
'**/*.js',
'**/*.jsx',
'**/*.tsx',
'**/*.ts',
],
;
复制代码
5. 添加index.css
新建index.css
并加入以下内容
可以发现,如果样式代码不符合规范,styleint会在代码中给出提示
功能增强
Git History🎄
对于一些开发者习惯使用编辑器中的Git管理工具的,不太喜欢要打开另外一个Git UI工具的同学,这一款插件满足你查询所有Git记录的需求。
查看和搜索git日志中的图形和详细信息。
查看文件以前的副本。
查看和搜索历史
比较分支/提交记录/文件
......
gitlens🎋
Git Lens
把 VSCode
结合 Git
的使用体验优化到了极致,能让我们在不离开编辑器,不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等
编码效率
tabnine🎍
使用AI优化代码的自动补全功能,有了它,再也不需要其他代码提示工具了
markdown写作
现在大部分博客平台都支持 Markdown
编辑,这可以很方便直接将我们写的内容复制到多个写作平台
我们在VSCode中进行Markdown
编辑当然也少不了安装一些"必备"扩展
Markdown 百宝箱🎎
markdown-all-in-one
是在VSCode中编写Markdown 最好用的工具之一,各种快捷键,创建表格,预览,应有尽有
根据标题自动生成目录
Markdown 转 HTML
根据第一个序号,后面的序号自动生成
......
Markdown 转 PDF 🎏
比如我们偶尔可以使用Markdown
编写简历,写好了转换成PDF,着实非常方便
本地图片文件自动上传🎐
Markdown
写作当然少不了贴图, 但是 Markdown
只支持图片地址,那么我们如何将本地的图片文件转换为远程图片地址呢?
这里推荐PicGo[22],它是一个用于快速上传图片并获取图片 URL 链接的工具
PicGo 本体支持多种图床
七牛云
腾讯云
阿里云
GitHub
Gitee
...
支持上传图片后自动复制链接到剪贴板
如何使用
安装 PicGo 的 VSCode 插件插件
PicGo 图床相关配置
复制(
Ctrl+C
)想要上传/插入的图片进入
Markdown
编辑器,鼠标放在需要插入图片的位置上传图片
Windows 上传图片的快捷键``
Mac 上传图片的快捷键
option+command+u
如果上传成功,会自动生成图片地址
代码截图工具🎑
对于文章中的代码,有人习惯用 markdown 本身的代码片段,也有人习惯放代码截图。但是手工截图很保证尺寸统一大小,不太美观。这里推荐用插件polacode
。它是一款可以自动将代码转换为图片的 VSCode 扩展
支持整个文件代码转为图片
支持鼠标选中部分代码转换为图片
支持为图片添加阴影或背景
使用方式也非常简单。安装启用后,打开VSCode的命令面板:
mac下的快捷键是
shift+command+p
在命令面板中输入polacode
并选择它,就可以开始截图了
可以把代码保存为统一大小的图片,然后结合PicGo
扩展,自动将图片地址插入到markdown文章中。
VSCode的自动同步功能
如果你有多台电脑,想在不同电脑之间同步 VSCode 配置,但是又不需要安装额外的扩展插件,就用它吧。
“VSCode”左下角->“设置同步”->"登录需要同步的账户"->"立即同步"即可
参考资料
[1]
https://code.visualstudio.com/docs/editor/extension-marketplace: https://link.juejin.cn?target=https%3A%2F%2Fcode.visualstudio.com%2Fdocs%2Feditor%2Fextension-marketplace
[2]https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans: https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DMS-CEINTL.vscode-language-pack-zh-hans
[3]https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme: https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DPKief.material-icon-theme
[4]https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons: https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dvscode-icons-team.vscode-icons
[5]http://eslint.cn/: https://link.juejin.cn?target=http%3A%2F%2Feslint.cn%2F
[6]https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint: https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddbaeumer.vscode-eslint
[7]https://www.yuque.com/u221766/axqfd2/cwrrmz: https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fu221766%2Faxqfd2%2Fcwrrmz
[8]https://juejin.cn/post/6947872709208457253#heading-2: https://juejin.cn/post/6947872709208457253#heading-2
[9]https://www.prettier.cn/: https://link.juejin.cn?target=https%3A%2F%2Fwww.prettier.cn%2F
[10]https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint: https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddbaeumer.vscode-eslint
[11]https://www.yuque.com/u221766/axqfd2/cd17ov: https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fu221766%2Faxqfd2%2Fcd17ov
[12]https://juejin.cn/post/6947872709208457253#heading-3: https://juejin.cn/post/6947872709208457253#heading-3
[13]https://editorconfig.org/: https://link.juejin.cn?target=https%3A%2F%2Feditorconfig.org%2F
[14]https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint: https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddbaeumer.vscode-eslint
[15]https://www.yuque.com/u221766/axqfd2/aczzcm: https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fu221766%2Faxqfd2%2Faczzcm
[16]https://juejin.cn/post/6947872709208457253#heading-3: https://juejin.cn/post/6947872709208457253#heading-3
[17]https://stylelint.io/user-guide/get-started: https://link.juejin.cn?target=https%3A%2F%2Fstylelint.io%2Fuser-guide%2Fget-started
[18]https://www.yuque.com/u221766/axqfd2/lvao3m: https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fu221766%2Faxqfd2%2Flvao3m
[19]https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint: https://link.juejin.cn?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddbaeumer.vscode-eslint
[20]https://www.yuque.com/u221766/axqfd2/aczzcm: https://link.juejin.cn?target=https%3A%2F%2Fwww.yuque.com%2Fu221766%2Faxqfd2%2Faczzcm
[21]https://juejin.cn/post/6947872709208457253#heading-3: https://juejin.cn/post/6947872709208457253#heading-3
[22]https://picgo.github.io/PicGo-Doc/: https://link.juejin.cn?target=https%3A%2F%2Fpicgo.github.io%2FPicGo-Doc%2F
最后
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)
欢迎加我微信「 sherlocked_93 」拉你进技术群,长期交流学习...
关注公众号「前端下午茶」,持续为你推送精选好文,也可以加我为好友,随时聊骚。
点个在看支持我吧,转发就更好了
vscode超实用插件推荐,让你的开发效率火力全开(代码片段)
辅助开发类:1. VeturVUE开发必备插件1.语法高亮,包括vue/htmlcss/sass/scss/less/stylusjs/ts2.语义高亮,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件3.语法错误检查,包括CSS/SCSS/LESS/Javascript/TypeSc... 查看详情
vscode插件的开发及发布指南(代码片段)
...包管理器、终端、Git版本管理、代码diff等功能。实际上能让VSCode称得上是一个万能的IDE正是由于它庞大的扩展生态。对于我们前端开发者来说,只要了解相关API,VSCode扩展的开发基本没有门槛。VSCode扩展VSCod 查看详情
精选!15个必备的vscode插件(前端类)
...类)15天前?Plugins,Web前端?暂无评论VisualStudioCode是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱。 就像大多数IDE一样,VSCode也有一个扩展和主题市场,包含了数... 查看详情
几款提升开发体验的vscode插件推荐(代码片段)
...,扩展丰富,尤其是扩展丰富,目前前端代码开发,以及常规的代码 查看详情
这12款idea插件,能让你代码飞起来(代码片段)
前言基本上每个程序员都会写代码,但写代码的速度不尽相同。为什么有些人,一天只能写几百行代码?而有些人,一天可以写几千行代码?有没有办法,可以提升开发效率,在相同的时间内,写... 查看详情
这12款idea插件,能让你代码飞起来(代码片段)
前言基本上每个程序员都会写代码,但写代码的速度不尽相同。为什么有些人,一天只能写几百行代码?而有些人,一天可以写几千行代码?有没有办法,可以提升开发效率,在相同的时间内,写... 查看详情
几款提升开发体验的vscode插件推荐(代码片段)
...,扩展丰富,尤其是扩展丰富,目前前端代码开发,以及常规的代码文件编辑修改,我都是用VSCode来完成的,如果你还没有尝试过,强烈推荐,顺便贴一个下载地址:https://code.visualstudio.com/今天... 查看详情
深度盘点:23个提高开发效率和美观的vscode插件神器(代码片段)
VSCode(全称:VisualStudioCode)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能,并且内置了命令行工具和Git版本控制系统。用户可以更改主题和键盘快捷方式... 查看详情
提高编程效率的5大vscode插件
前言作为一名开发人员,大家会一直寻找可以帮助改进日常工作流程的解决方案,VSCode市场中就有很多优秀的扩展插件程序。正文一、GitLiveGitLive是一个出色的扩展程序,它可以实时监控IDE内置Git的情况,例如团队成员... 查看详情
10种javascript开发者必备的vscode插件
摘要:好的代码插件可以让工作效率翻倍,心情也更加舒畅!原文:10Must-haveVSCodeExtensionsforJavaScriptDevelopers作者:MichaelWanyoike译者:Fundebug毫无疑问VisualStudioCode是最流量的轻量级代码编辑器。它确实从其它代码编辑器吸收了大量... 查看详情
egretwing
...高开发效率。这款工具还支持Node.js开发扩展插件,可以让你更好的定制化自有内容。下载地址:https://www.egret.com/products/wing.html技术社区:http://developer.egret.com/cn/ 查看详情
提高编程效率的5大vscode插件
前言作为一名开发人员,大家会一直寻找可以帮助改进日常工作流程的解决方案,VSCode市场中就有很多优秀的扩展插件程序。正文一、GitLiveGitLive是一个出色的扩展程序,它可以实时监控IDE内置Git的情况,例如团... 查看详情
让你在windows上工作效率翻倍
...。图形界面很慢有木有!那么给你介绍一种酷炫的方式,让你重新认识windows。鼠标小,屏幕大,点起来好麻烦!对于我这种命令行摸习惯的人,所以比较希望在windows上通过cmd秒开你所想要的应用程序。好了,正文开始喽。(其... 查看详情
vscode插件
...费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性,支持插件扩展,并针对网页开发和云 查看详情
vscode常用插件
...费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平... 查看详情
3款国产软件,让你工作效率翻倍,白嫖党的最爱,还不来看
布丁扫描——免费专业的扫描APP(安卓、ios)不得不称赞布丁扫描,算是年度良心实用的软件TOP。在一群付费扫描app的“妖艳贱货”里,显得各位清新脱俗,测试了一通,毫无套路,所有功能都是免费... 查看详情
这款软件可以让你的企业成本降低12%,业绩翻倍
随着全球化的而不断加剧,市场竞争也日益激烈。第四次产业革命的到来更是为制造企业的生存与发展带来了挑战。传统制造业长期面临着有订单却无法按时交货的问题,这时候你去排查原因,往往会出现这种情况:车间管理人... 查看详情
八个提高效率的vscode必备扩展插件
...。5.Quokka.jsQuokka.js是用于快速JavaScript/TypeScript原型设计的开发人员生产力工具。运行时值会在您键入时更新并显示在您的代码旁边。它使JavaScript/TypeScript的原型设计、学习和测试速度更快。6.C 查看详情