vscode常用插件

目前我的vscode里面：code-首选项-设置 如下：

{
    "window.zoomLevel": 1,
    "editor.renderControlCharacters": false,
    "editor.renderWhitespace": "all",
    "team.showWelcomeMessage": false,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "emmet.triggerExpansionOnTab": true,
    "emmet.showAbbreviationSuggestions": true,
    "emmet.showExpandedAbbreviation": "always",
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    },
    "workbench.panel.location": "bottom",
    "typescript.validate.enable": true,
    "fileheader.Author": "tianzhi",
    "fileheader.LastModifiedBy": "tianzhi"
}

{
    "window.zoomLevel": 1,
    // "fileheader.Author": "tianzhi",
    // "fileheader.LastModifiedBy": "tianzhi",
    "git.autorefresh": false,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "java.home": "/Library/Java/JavaVirtualMachines/jdk1.8.0_231.jdk/Contents/Home",
    // 文件头部注释
    "fileheader.customMade": {
        "Author":"tz",
        "Date":"Do not edit",
        "LastEditors":"tz",
        "LastEditTime":"Do not Edit",
        "Description": "description"
    },
    //函数注释
    "fileheader.cursorMode": {
        "name":"",
        "test":"test font",
        "msg":"",
        "param":"",
        "return":""
    },
    "diffEditor.ignoreTrimWhitespace": false,
    "git.enableSmartCommit": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "git.confirmSync": false,
    "editor.tabSize": 2,
    "eslint.alwaysShowStatus": true,
    "eslint.format.enable": true,
    "eslint.run": "onSave",
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll": true
    },
    "auto-close-tag.activationOnLanguage": [
        "xml",
        "php",
        "blade",
        "ejs",
        "jinja",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "plaintext",
        "markdown",
        "vue",
        "liquid",
        "erb",
        "lang-cfml",
        "cfml",
        "HTML (EEx)",
        "HTML (Eex)",
        "plist"
    ]
}

插件：

文件

• 【Path Intellisense】 自动补全路径

浏览器

• 【Open-In-Browser】在浏览器中打开或预览
• 【Debugger for Chrome】让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试

css

• 【CSS Peek】跳转到css的定义行
• 【Color Info】颜色信息转换

html

• 【HTML Boilerplate】自动生成HTML模板
• 【Icon Fonts】字体标签自生成

js

• 【Add jsdoc comments】为所选函数签名的参数添加简单的jsdoc注释

svg

• 【SVG Viewer】 svg图预览

其他

• 【Minify】代码压缩
• 【Change Case】变量名格式转换
• 【Regex Previewer】正则表达式预览
• 【Language and Framework Packs】语言和框架 添加自动填充，适当的缩进和其他实用功能

vue

• 【vetur】 vue语法高亮
• 【vueHelper】vue2代码段

react

• ES7 React/Redux/GraphQL/React-Native snippets
• 【react playground】react租金啊运行环境
• 【react standard style code snippets】react standard风格代码块

HTML

• 【auto close tag】 自动闭合HTML标签
• 【auto rename tag】 修改HTML标签时自动修改匹配标签
• 【htmltagwrap】包裹HTML
• 【HTML css suppot】css提示，支持vue的css提示
• 【HTML Boilerplate】 摆脱HTML 新文件重新编写头部和正文标签，直接生成模板HTML

css

• 【beautify css/sass/scss/less】 css/sass/scss/less格式化
• 【color highlight】颜色值在代码中高亮显示
• 【less intellisense】less变量与混合提示
• 【postCss sorting】css排序
• 【sass】sass插件
• 【language-stylus】stylus语法高亮和提示
• 【CSS Peek】追踪至样式表中 CSS 类和 ids 定义的地方

js

• 【json tools】格式化和压缩json   Cmd+Alt+M

ts

• 【TSLint】typescript语法检查
• 【Typescript import】ts自动import

注释

• 【better comments】编写更加人性化的注释
• 【document this】注释文档生成
• 【vscode-fileheader】头部添加维护者信息   ctrl + alt + i

语法检查

• 【eslint】 eslint插件高亮提示
• 【stylelint】css/sass/less代码风格

VS code编译器设置

• 【VS code icon】 文件图片标识
• 【vscode-random】随机字符串生成器
• 【styled-components】VS coed-component高亮支持
• 【VS coed-styled-jsx】styled-jsx高亮支持

git

• 【git blame】在状态栏显示当前行的git信息
• 【git history】查看git log
• 【gitLens】显示文件最近的commit和作者，显示当前行commit信息
• 【gitignore】.gitignore文件语法

其他

• 【bookmarks】添加行书签
• 【code spell checker】单词拼写检查
• 【file peek】根据路径字符串，快速定位到文件
• 【font-awesome codes for html】fontawesome提示代码段
• 【guides】高亮缩进基准线
• 【path autocomplete】完整路径提示
• 【project manager】切换项目
• 【REST client】发送REST风格的HTTP请求
• 【sort lines】 排序选中行string manipulation
• 【test spec generator】测试用例生成
• 【version lens】package.json文件显示模块当前版本和最新版本
• 【view node package】快速打开选中模块主页和代码仓库
• 【filesize】状态栏显示当前文件大小
• 【markdownlint】markdown格式提示
• 【npm intellisense】导入模块提示已安装模块名称npm
• 【Open In Browser】vscode直接打开浏览器
• 【Prettier】代码格式
• 【SVG Viewer】在 Visual Studio 代码中添加了许多实用的 SVG 程序，你无需离开编辑器，便可以打开 SVG 文件并查看它们。同时，它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项
• 【Minify】用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。
• 【Change Case】修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等
• 【Themes】切换svcode漂亮的主题