快捷搜索:  汽车  科技

vs code 神器,38VScode必备前端插件

vs code 神器,38VScode必备前端插件用于着色匹配括号,让你的代码分层更清晰解析CSS并自动添加前缀推荐一款图标插件vscode-icons,安装成功后,会根据不同的文件类型添加不同的图标样式,看起来会更有趣。自动闭合 HTML/XML 标签自动重命名 HTML/XML 标签

切换语言

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

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

vs code 神器,38VScode必备前端插件(1)

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

vs code 神器,38VScode必备前端插件(2)

更换主题

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

vs code 神器,38VScode必备前端插件(3)

添加图标

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

vs code 神器,38VScode必备前端插件(4)

添加代码片段
  • 打开用户片段

vs code 神器,38VScode必备前端插件(5)

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

vs code 神器,38VScode必备前端插件(6)

vs code 神器,38VScode必备前端插件(7)

  • 输入自定义代码片段

vs code 神器,38VScode必备前端插件(8)

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

vs code 神器,38VScode必备前端插件(9)

vs code 神器,38VScode必备前端插件(10)

Auto Close Tag

自动闭合 HTML/XML 标签

vs code 神器,38VScode必备前端插件(11)

vs code 神器,38VScode必备前端插件(12)

Auto Rename Tag

自动重命名 HTML/XML 标签

vs code 神器,38VScode必备前端插件(13)

vs code 神器,38VScode必备前端插件(14)

Autoprefixer

解析CSS并自动添加前缀

vs code 神器,38VScode必备前端插件(15)

vs code 神器,38VScode必备前端插件(16)

Bracket Pair Colorizer

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

vs code 神器,38VScode必备前端插件(17)

vs code 神器,38VScode必备前端插件(18)

Code Runner

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

vs code 神器,38VScode必备前端插件(19)

vs code 神器,38VScode必备前端插件(20)

Code Spell Checker

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

vs code 神器,38VScode必备前端插件(21)

vs code 神器,38VScode必备前端插件(22)

css Peek

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

vs code 神器,38VScode必备前端插件(23)

vs code 神器,38VScode必备前端插件(24)

DotENV

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

vs code 神器,38VScode必备前端插件(25)

vs code 神器,38VScode必备前端插件(26)

Draw.io Integration

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

vs code 神器,38VScode必备前端插件(27)

vs code 神器,38VScode必备前端插件(28)

ESLint

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

vs code 神器,38VScode必备前端插件(29)

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

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

突出显示匹配的标签

vs code 神器,38VScode必备前端插件(30)

vs code 神器,38VScode必备前端插件(31)

Image Preview

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

vs code 神器,38VScode必备前端插件(32)

vs code 神器,38VScode必备前端插件(33)

Import Cost

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

vs code 神器,38VScode必备前端插件(34)

vs code 神器,38VScode必备前端插件(35)

Javascript console utils

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

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

vs code 神器,38VScode必备前端插件(36)

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 {*} */ 复制代码

vs code 神器,38VScode必备前端插件(37)

vs code 神器,38VScode必备前端插件(38)

npm Intellisense

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

vs code 神器,38VScode必备前端插件(39)

vs code 神器,38VScode必备前端插件(40)

open in browser

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

  • ⌥ B,打开默认浏览器

vs code 神器,38VScode必备前端插件(41)

vs code 神器,38VScode必备前端插件(42)

Path Intellisense

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

vs code 神器,38VScode必备前端插件(43)

vs code 神器,38VScode必备前端插件(44)

Prettier

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

vs code 神器,38VScode必备前端插件(45)

Svg Preview

方便svg文件预览

vs code 神器,38VScode必备前端插件(46)

vs code 神器,38VScode必备前端插件(47)

Todo Tree

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

vs code 神器,38VScode必备前端插件(48)

vs code 神器,38VScode必备前端插件(49)

Trailing Spaces

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

vs code 神器,38VScode必备前端插件(50)

vs code 神器,38VScode必备前端插件(51)

还有一些插件Power Mode

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

vs code 神器,38VScode必备前端插件(52)

vs code 神器,38VScode必备前端插件(53)

vs code 神器,38VScode必备前端插件(54)

......

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

猜您喜欢: