vs code 神器,38VScode必备前端插件
vs code 神器,38VScode必备前端插件用于着色匹配括号,让你的代码分层更清晰解析CSS并自动添加前缀推荐一款图标插件vscode-icons,安装成功后,会根据不同的文件类型添加不同的图标样式,看起来会更有趣。自动闭合 HTML/XML 标签自动重命名 HTML/XML 标签
切换语言安装完成后,默认显示英文,我们可以通过安装中文语言包插件来显示中文,操作如下:
打开vscode,点击插件图标(或 ⌘ ⇧ X),在搜索框中输入“chinese”,安装
使用快捷键“⌘ ⇧ P”打开vscode的命令框,输入display,点击“Configure Display Language”,切换语言
如果不喜欢VS code本身的主题色,也可以更换默认主题,在命令框中输入color theme,回车,会进入主题列表,通过上下键切换主题,还不满足,没关系,点击安装其他颜色主题,在左侧会出现各式各样的主题插件,选择一个安装即可。
推荐一款图标插件vscode-icons,安装成功后,会根据不同的文件类型添加不同的图标样式,看起来会更有趣。
- 打开用户片段
- 点击新代码片段,输入框中输入片段名称
- 输入自定义代码片段
- 代码中使用,输入vue3-template,选择新建的片段
自动闭合 HTML/XML 标签
自动重命名 HTML/XML 标签
解析CSS并自动添加前缀
用于着色匹配括号,让你的代码分层更清晰
运行代码片段或多种语言的代码文件
源代码拼写检查器,提示代码中单词拼写错误
允许查看css,并从HTML文件定位到css文件,文件定义跳转
支持.env文件语法,高亮显示
在VS code中绘制流程图,随时记录你的idea,不要太方便
代码格式校验工具,配合项目中的校验规则,实现保存时格式化代码,开发必备,你值得拥有!
配置文件,在setting.json中添加,可以参考一下
"editor.codeActionsOnSave": {
"source.fixAll": true
}
"eslint.validate": [
"javascript"
"javascriptreact"
"vue"
"typescript"
"typescriptreact"
]
复制代码
Highlight Matching Tag
突出显示匹配的标签
当你引入时在左侧会显示图片的缩略图,方便预览
在编辑器中展示引用包的大小,让你更了解你引入的包
帮助你更快速的添加console和删除console,确实方便
- 选择你的变量,⌘ ⇧ L,将会输出,如 console.log(' test ' test )
- ⌘ ⇧ D,将删除当前文档中的所有 console.log 语句
在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 {*}
*/
复制代码
代码插件,在导入语句中自动完成NPM模块
允许你在默认浏览器或应用程序中打开当前文件。
- ⌥ B,打开默认浏览器
自动识别文件路径,引用更方便
非常喜欢的一款代码格式化工具,在项目中也可以配置自己的规则
方便svg文件预览
快速搜索编辑器中添加的标签,如todo和fixme,并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。
突出显示尾随空格并快速删除它们!
你的代码很强大,释放它!
......
大家有什么好用的插件,也可以推荐一下哈~