下载安装VSCode
下载安装:https://code.visualstudio.com/Download
通用插件
-
Auto Close Tag
:匹配标签,关闭对应的标签
-
Auto Rename Tag
:自动重命名
-
beautify
: 良好的拓展性,可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用
-
View In Browser
或 Open In Browser
运行在浏览器中打开文件
-
HTML CSS Support
:这个也是必备插件之一
-
Path Autocomplete
:路径智能补全
-
Path Intellisense
: 路径智能提示
-
CSS Peek
:使用此插件,你可以追踪至样式表中 CSS 类和 id 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
-
HTML Boilerplate
:通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构
-
Color Info
:这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了
-
Live Server
:模拟服务器,可以使用http协议打开页面
-
Preview on WebServer
:模拟服务器,可以使用http协议打开页面
-
CSS Peek
:使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
-
HTML Boilerplate
:通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构
-
Color Info
:这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了
-
Live Server
:模拟服务器,可以使用http协议打开页面
-
Preview on WebServer
:模拟服务器,可以使用http协议打开页面
-
relative path
:相对路径的书写
使用方法:
(1)安装relative path插件
(2)在需要书写相对路径的文件中通过快捷键ctrl+shift+h,调出文件搜索面板
(3)在文件在文件搜索面板中搜索出对应的文件,将光标放置在需要设置路径的文件处,选中所要设置的文件即可
-
Path Tools
:路径转换插件
使用方法:
(1)安装Path Tools
(2)选中工作区中的文件,右击复制文件路径
(3)将文件路径填写到对应的位置
(4)选中所填写的文件路径,安装快捷键ctrl+shift+p(或快捷键F1)调出命令面板
(5)在命令面板中输入
(.)Relative: 将路径转换为相对于当前文件的相对路径
(.)Resolve: 将路径转换为完整路径
(.)Windows:将路径转化为windows操作系统的完成路径
-
Atom JavaScript Snippet
:js字段补全
-
Chinese
:中文语言包
-
Git History
:文件历史记录工具
-
Prettier
:代码格式化工具
-
Stylelint
:css代码规范工具
-
TypeScript Vue Plugin
:ts+vue工具
vue插件
Vetur
:VScode中的VUE工具,高亮、格式化Vue snippets
:Vue的提示插件vue 2 snippets
:Vue2的提示插件Vue VSCode Snippets
:快捷生成页面的一些代码
(1)vue基本骨架 vbase
(2)data vdata
(3)methods vmethod
(4)v-for vfor
React插件
Redux/react-router Snippets
:React的提示插件Simple React Snippets
:提示 快速生成代码块,Reactjs code snippets
:提示 快速生成代码块Beautify React JavaScript TypeScirpt
插件可以格式化JSXReact Redux ES6 Snippets
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)