38、VS code必备前端插件

切换语言

安装完成后,默认显示英文,我们可以通过安装中文语言包插件来显示中文,操作如下:

打开vscode,点击插件图标(或 ⌘ + ⇧ + X),在搜索框中输入“chinese”,安装

38、VS code必备前端插件

使用快捷键“⌘ + ⇧ + P”打开vscode的命令框,输入display,点击“Configure Display Language”,切换语言

38、VS code必备前端插件

更换主题

如果不喜欢VS code本身的主题色,也可以更换默认主题,在命令框中输入color theme,回车,会进入主题列表,通过上下键切换主题,还不满足,没关系,点击安装其他颜色主题,在左侧会出现各式各样的主题插件,选择一个安装即可。

38、VS code必备前端插件

添加图标

推荐一款图标插件vscode-icons,安装成功后,会根据不同的文件类型添加不同的图标样式,看起来会更有趣。

38、VS code必备前端插件

添加代码片段

  • 打开用户片段

38、VS code必备前端插件

  • 点击新代码片段,输入框中输入片段名称

38、VS code必备前端插件

38、VS code必备前端插件

  • 输入自定义代码片段

38、VS code必备前端插件

  • 代码中使用,输入vue3-template,选择新建的片段

38、VS code必备前端插件

38、VS code必备前端插件

Auto Close Tag

自动闭合 HTML/XML 标签

38、VS code必备前端插件

38、VS code必备前端插件

Auto Rename Tag

自动重命名 HTML/XML 标签

38、VS code必备前端插件

38、VS code必备前端插件

Autoprefixer

解析CSS并自动添加前缀

38、VS code必备前端插件

38、VS code必备前端插件

Bracket Pair Colorizer

用于着色匹配括号,让你的代码分层更清晰

38、VS code必备前端插件

38、VS code必备前端插件

Code Runner

运行代码片段或多种语言的代码文件

38、VS code必备前端插件

38、VS code必备前端插件

Code Spell Checker

源代码拼写检查器,提示代码中单词拼写错误

38、VS code必备前端插件

38、VS code必备前端插件

CSS Peek

允许查看css,并从HTML文件定位到css文件,文件定义跳转

38、VS code必备前端插件

38、VS code必备前端插件

DotENV

支持.env文件语法,高亮显示

38、VS code必备前端插件

38、VS code必备前端插件

Draw.io Integration

在VS code中绘制流程图,随时记录你的idea,不要太方便

38、VS code必备前端插件

38、VS code必备前端插件

ESLint

代码格式校验工具,配合项目中的校验规则,实现保存时格式化代码,开发必备,你值得拥有!

38、VS code必备前端插件

配置文件,在setting.json中添加,可以参考一下

"editor.codeActionsOnSave": {    "source.fixAll": true},"eslint.validate": [    "javascript",    "javascriptreact",    "vue",    "typescript",    "typescriptreact"],复制代码

Highlight Matching Tag

突出显示匹配的标签

38、VS code必备前端插件

38、VS code必备前端插件

Image Preview

当你引入时在左侧会显示图片的缩略图,方便预览

38、VS code必备前端插件

38、VS code必备前端插件

Import Cost

在编辑器中展示引用包的大小,让你更了解你引入的包

38、VS code必备前端插件

38、VS code必备前端插件

Javascript console utils

帮助你更快速的添加console和删除console,确实方便

  • 选择你的变量,⌘ + ⇧ + L,将会输出,如 console.log(' test ', test )
  • ⌘ + ⇧ + D,将删除当前文档中的所有 console.log 语句

38、VS code必备前端插件

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!

  • ⌃ + ⌘ + i,可生成文件头部注释
<!-- * @Author: your name * @Date: 2021-11-18 18:08:32 * @LastEditTime: 2021-11-19 11:29:00 * @LastEditors: your name * @Description:  * @FilePath: -->复制代码
  • ⌃ + ⌘ + t,自动解析函数参数,生成函数参数注释
/** * @description:  * @param {*}  * @return {*} */复制代码

38、VS code必备前端插件

38、VS code必备前端插件

npm Intellisense

代码插件,在导入语句中自动完成NPM模块

38、VS code必备前端插件

38、VS code必备前端插件

open in browser

允许你在默认浏览器或应用程序中打开当前文件。

  • ⌥ + B,打开默认浏览器

38、VS code必备前端插件

38、VS code必备前端插件

Path Intellisense

自动识别文件路径,引用更方便

38、VS code必备前端插件

38、VS code必备前端插件

Prettier

非常喜欢的一款代码格式化工具,在项目中也可以配置自己的规则

38、VS code必备前端插件

Svg Preview

方便svg文件预览

38、VS code必备前端插件

38、VS code必备前端插件

Todo Tree

快速搜索编辑器中添加的标签,如todo和fixme,并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。

38、VS code必备前端插件

38、VS code必备前端插件

Trailing Spaces

突出显示尾随空格并快速删除它们!

38、VS code必备前端插件

38、VS code必备前端插件

还有一些插件

Power Mode

你的代码很强大,释放它!

38、VS code必备前端插件

38、VS code必备前端插件

38、VS code必备前端插件

......

大家有什么好用的插件,也可以推荐一下哈~

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/115017.html

(0)

相关推荐

  • 现在疫情期间小孩发烧了怎么办,疫情期间宝宝发烧了怎么办

    现在正值新型冠状病毒疫情反弹,各项防疫措施严阵以待的关键时期,又逢冬季流感季节,常听家长朋友们哭诉,自家宝贝突然出现发烧该怎么办——来医院吧,害怕招上新冠病毒,呆家里吧,又担心耽误孩子病情,因此全家如临大敌,备受煎熬。以前上海医疗救治专家组组长张文宏教授在进行预防新冠科普讲座中,也被父母们问到类似的问题。

    生活 2021年11月17日
  • 银行定期存款到期自动转存什么意思,银行存的定期到期了是直接自动转到卡里

    最近有去过银行办业务的朋友,可能会发现一个新的现象,不论男女老少,定期存款变成了他们的第一选择,好像在一夜之间,存定期突然又“火”了起来。

    生活 2021年10月23日
  • 秋分后 养生注意六要点

    广州日报讯 (全媒体记者吴婉虹)今年秋分到了。在秋分这天,太阳几乎直射地球赤道,全球各地昼夜等长。此后,太阳直射的位置移至南半球,北半球得到的太阳辐射越来越少,降温的速度将明显加快。“白露秋分夜,一夜冷一夜”便是此意。广州中医药大学第一附属医院内科主任医师梁幼雅支招:秋分过后,这六个调养细节要注意。

    生活 2021年9月24日
  • 一把一把的掉头发,从毛囊开始

    最近去理发,理发小哥说头后面脱发有些严重啊!开始还是没太注意,今天捋了捋头发一下掉了这么多

    生活 2021年9月9日
  • 缓解眼疲劳的小妙招,防止眼睛疲劳的有效小方法

    眼睛是人体最辛苦的身体组织之一。从我们早上睁开眼的那一刻起,眼睛就在不停地工作,久而久之就会导致眼睛受损,并诱发干涩、干痒、酸胀等症状出现,严重的会得上各种眼疾。因此,在日常生活里,大家一定要尽量少用眼,不要经常熬夜或长时间看手机,让眼睛得到充分的休息。

    生活 2021年12月2日