chrome vue插件_vscode常用插件

插件介绍

1. HTML Snippets
   > 初级H5代码片段及提示

1. HTML CSS Support
   > 初级H5代码片段及提示

1. Debugger for Chrome
   > 让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试
2. jQuery Code Snippets
   > jquery 重度患者必须品，废话不多说
3. vscode-icon
   > 让 vscode 资源树目录加上图标，必备良品！
4. Path Intellisense
   > 自动路劲补全，默认不带这个功能的，赶紧装
5. beautify
   > 格式化代码的工具
6. Prettier
   > 格式化代码的工具,一键美化你的JavaScript/TypeScript/CSS代码。
7. Color Highlight
   > 直观展示你定义的颜色。

1. Atuo Rename Tag
   > 修改 html 标签，自动帮你完成尾部闭合标签的同步修改
2. GitLens
   > 丰富的git日志插件
3. fileheader
   > 顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

1. Bracket Pair Colorizer
   > 让括号拥有独立的颜色，易于区分。可以配合任意主题使用。代码块高亮.

1. Open-In-Browser
   > 此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项

1. 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 就行了
2. CSS Peek
   > 你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。
3. SVG Viewer
   > 此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项。
4. 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
   高亮缩进线
5. Auto Close Tag
   > 自动添加HTML / XML关闭标签（必备）
6. Git History
   > 以图表的形式查看git日志
7. htmltagwrap
   > 可以在选中HTML标签中外面套一层标签
   使用：选择一大段代码，然后按“Alt + W”
8. Image Preview
   > 鼠标移到路径里显示图像预览
9. Output Colorizer
   > 输出提示的文字颜色有一些变化，方便获取关键信息
10. Sass
    > sass必备
11. Image Preview
    > 鼠标移到路径里显示图像预览
12. Image Preview
    > 鼠标移到路径里显示图像预览
13. Live Sass Compiler
    > 实时编译 sass ,不过需要配置，附上我的配置 "liveSassCompile.settings.formats":[ // You can add more { "format": "compressed",//压缩 "extensionName": ".min.css",//编译后缀名 "savePath": "./css"//编译保存的路径 } ],

1. indent-rainbow
   > 简单的插件可以使得对齐更加具有可读性。色彩填充断行,实用.

1. Better Comments
   > 更加人性化的注释

1. Highlight Matching Tag
   > 自动匹配标签结束地方

1. vscode-spotify
   > 音乐插件
2. VueHelper
   > snippet代码片段

Vue插件及react

1. vetur
   > 语法高亮、智能感知、Emmet等
2. VueHelper
   > snippet代码片段
3. Import Cost > 引入包大小计算,对于项目打包后体积掌握很有帮助
4. Vue 2 Snippets
   > Vue2 片段补全工具
5. npm Intellisense > 可以在导入语句自动补全npm模块名称。
6. react-beautify > 格式化 javascript, JSX, typescript, TSX 文件
7. React-Native/React/Redux snippets for es6/es7 > react代码片段，下载人数超多

主题及个性化

1. Dracula Official > 目前我觉得是vscode上最漂亮的主题,

1. One Dark Pro
   > 最常用主题
2. Eva Theme
   > 里面包含黑色和白色主题，这个白色主题感觉挺好看的

1. Boxy Theme Kit
   > 最常用主题
2. One Monokai Theme

1. Material Theme
   > Visual Studio Code最悠久的主题！

基本配置

1. 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
}