插件介绍
- HTML Snippets
> 初级H5代码片段及提示
- HTML CSS Support
> 初级H5代码片段及提示
- Debugger for Chrome
> 让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试 - jQuery Code Snippets
> jquery 重度患者必须品，废话不多说 - vscode-icon
> 让 vscode 资源树目录加上图标，必备良品！ - Path Intellisense
> 自动路劲补全，默认不带这个功能的，赶紧装 - beautify
> 格式化代码的工具 - Prettier
> 格式化代码的工具,一键美化你的JavaScript/TypeScript/CSS代码。 - Color Highlight
> 直观展示你定义的颜色。
- Atuo Rename Tag
> 修改 html 标签，自动帮你完成尾部闭合标签的同步修改 - GitLens
> 丰富的git日志插件 - fileheader
> 顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间
- Bracket Pair Colorizer
> 让括号拥有独立的颜色，易于区分。可以配合任意主题使用。代码块高亮.
- Open-In-Browser
> 此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项
- Quokka
> Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。
``` // ctrl + shift + p 搜索 quokka 命令 执行
// 要打开新的quokka文件（Cmd/Ctrl + K, J对于JavaScript或Cmd/Ctrl + K, TTypeScript），请在现有文件（Cmd/Ctrl + K, Q）上（重新）启动它。 ```
使用：先shift+cmd+p （ctrl+shift+p）输入 quokka 选择 new javascript 就行了 - CSS Peek
> 你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。 - SVG Viewer
> 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。 - TODO Highlight
> 这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。// 在命令窗 搜索todo使用命令1. background
背景图片可自定义//"background.enabled": false,//卸载插件开启 "background.useDefault": false, "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index": "99999", "width": "100%", "height": "100%", "background-position": "0% 0%", "background-size": "cover", "background-repeat": "no-repeat", "opacity": 0.1 }, "background.customImages": [ "file:///F:/BaiduNetdiskDownload/s.jpg", "https://s.cn.bing.net/th?id=OSA.uMbS0SjznPW79w&w=230&h=160&c=8&rs=1&pid=SatAns" ],1. Indenticator
高亮缩进线 - Auto Close Tag
> 自动添加HTML / XML关闭标签（必备） - Git History
> 以图表的形式查看git日志 - htmltagwrap
> 可以在选中HTML标签中外面套一层标签
使用：选择一大段代码，然后按“Alt + W” - Image Preview
> 鼠标移到路径里显示图像预览 - Output Colorizer
> 输出提示的文字颜色有一些变化，方便获取关键信息 - Sass
> sass必备 - Image Preview
> 鼠标移到路径里显示图像预览 - Image Preview
> 鼠标移到路径里显示图像预览 - Live Sass Compiler
> 实时编译 sass ,不过需要配置，附上我的配置"liveSassCompile.settings.formats":[ // You can add more { "format": "compressed",//压缩 "extensionName": ".min.css",//编译后缀名 "savePath": "./css"//编译保存的路径 } ],
- indent-rainbow
> 简单的插件可以使得对齐更加具有可读性。色彩填充断行,实用.
- Better Comments
> 更加人性化的注释
- Highlight Matching Tag
> 自动匹配标签结束地方
- vscode-spotify
> 音乐插件 - VueHelper
> snippet代码片段
Vue插件及react
- vetur
> 语法高亮、智能感知、Emmet等 - VueHelper
> snippet代码片段 - Import Cost > 引入包大小计算,对于项目打包后体积掌握很有帮助
- Vue 2 Snippets
> Vue2 片段补全工具 - npm Intellisense > 可以在导入语句自动补全npm模块名称。
- react-beautify > 格式化 javascript, JSX, typescript, TSX 文件
- React-Native/React/Redux snippets for es6/es7 > react代码片段，下载人数超多
主题及个性化
- Dracula Official > 目前我觉得是vscode上最漂亮的主题,
- One Dark Pro
> 最常用主题 - Eva Theme
> 里面包含黑色和白色主题，这个白色主题感觉挺好看的
- Boxy Theme Kit
> 最常用主题 - One Monokai Theme
- Material Theme
> Visual Studio Code最悠久的主题！
基本配置
- vacode配置及插件推荐
{"editor.tabSize": 2,"files.associations": {"*.vue": "vue"},"eslint.autoFixOnSave": true,"eslint.options": {"extensions": [".js",".vue"]},"eslint.validate": ["javascript","javascriptreact","vue","vue-html"],"search.exclude": {"**/node_modules": true,"**/bower_components": true,"**/dist": true},"emmet.syntaxProfiles": {"javascript": "jsx","vue": "html","vue-html": "html"},"extensions.autoUpdate": true,"editor.renderWhitespace": "boundary","editor.cursorBlinking": "smooth","workbench.welcome.enabled": true
}
