使用VSCode需要安装的一些插件

下载安装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工具

• CSS Navigation：定位scss类名&连接符的位置，方便查询定位class样式

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 插件可以格式化JSX
• React Redux ES6 Snippets