VS Code 常用插件整理

• Auto Rename Tag

  • 介绍: html标签自动补全插件
  • 插件相关配置:
    可以通过以下配置，设置插件在什么语言下生效，默认是所有语言都有效。

    {
        "auto-rename-tag.activationOnLanguage": [
            "html",
            "xml",
            "php",
            "javascript"
        ]
    }
    

  • 效果:

• Beautify

  • 介绍: 代码格式化工具，支持javascript, JSON, CSS, Sass, HTML
  • 快捷键: Alt+Shift+F
  • 自定义快捷键方式:

    {
        "key": "Ctrl+b",
        "command": "HookyQR.beautify",
        "when": "editorFocus"
    }
    

  • 插件相关配置:
    以下为Beautify在VS Code下的相关配置方式。详细配置地址setting

    {
        "beautify.config": {
            "eol": "\n", //  用作换行符的字符。
            "tab_size": 4, // 一个tab等于几个空格
            ...
        },
    
        // 设置忽略哪些文件
        "beautify.ignore": ["*/test.js", "**/spec/*", "**/test/**/*"], // [忽略所有在根路径下的test.js, 忽略任意直接在spec路径下的文件, 忽略任意test路径下任意深度的文件]
        "beautify.ignore": "**/*_test.js" // 忽略任意以"_test.js"结尾的文件
        ...
    }
    

    另外: 配置也可以以.jsbeautifyrc配置文件的方式置于项目中。

• Bracket Pair Colorizer

  • 介绍: 以不同的颜色显示括号
  • 效果:
    

• Chinese(Simplified)

  • 介绍: VSCode 汉化插件
  • 使用方法:
    F1打开命令面板 >> 输入"config" >> 选择Configure Display Language >> 修改locale为zh-cn
    

• Color Hightlight

  • 介绍: 颜色高亮插件
  • 使用方法: 鼠标放到颜色代码上会自动弹出选色框，点击顶部颜色条可以切换16进制、hsl、rgb三种颜色模式；色板区域可以点击选色；右侧颜色拖栏可以选择颜色和透明度。
  • 效果:
    

• CSS Peek

  • 介绍: 可以直接查看, 转到class定义等
  • 使用方法:
  1. 在类名, ID 和 HTML标签上右击
     右键菜单中点击转到定义会打开对应的css文件,如果该选择器对应多个定义会出现弹框, 双击定义位置打开对应文件;
     点击查看定义会以弹框的方式显示当前选择器的具体css情况.
     
     2. Alt + 鼠标
     Alt + 点击相当于转到定义 , 如果该选择器对应多个定义会出现弹框, 双击定义位置打开对应文件;
     Alt + hover 相当于 查看定义.
     

• Document This

  • 介绍: 自动为TypeScript和JavaScript文件生成详细的JSDoc注释
  • 快捷键: Ctrl+Alt+D然后再次Ctrl+Alt+D
  • 效果:
    

• ESLint

  • 介绍: 将ESLint集成到VS Code中
  • 使用方法:
    1. 该扩展需要使用安装在工作区文件夹中的ESLint库, 如果文件夹内未提供, 扩展会自动查找全局安装版本.
    2. 另外在文件夹中还需要.eslintrc配置文件, 也可以通过eslint.options下的configFile属性指定配置文件地址.
  • 快捷键: Ctrl+S 会自动按规定格式
  • 插件相关配置:

    {
        "eslint.enable": true, // 启用/禁用ESLint。默认情况下启用。
        "eslint.provideLintTask": false, // 是否lint整个工作区文件夹。
        "eslint.packageManager": "npm", // 控制用于解析ESLint库的包管理器。 有效值为"npm"或"yarn"或"pnpm"。
        "eslint.options": {}, // 配置如何使用ESLint CLI Engine API启动ESLint的选项
        "eslint.run": "onType", // 在哪种情况下运行. 有效值"onSave"/保存时 "onType"/输入时
        "eslint.autoFixOnSave": true, // 保存的时候自动修复可以修复的问题
        "eslint.runtime": "", // 设置节点运行时的路径以运行ESLint
        "eslint.nodePath": "", // 如果无法检测到已安装的ESLint包可以使用此设置手动指定ESLint包地址. 比如: /myGlobalNodePackages/node_modules
        "eslint.validate": ["javascript", "javascriptreact", "html"], // 指定要验证的文件 默认为["javascript", "javascriptreact"]
        "eslint.workingDirectories": [], // 指定要使用的工作目录的数组。ESLint解析相对于工作目录的配置文件
        "eslint.codeAction.disableRuleComment": {
            "enable": true, // 在快速修复菜单中显示禁用lint规则 默认值为true
            "location": "separateLine" // 在同一行或不同行添加eslint-disable注释 有效值为"separateLine " 或 "sameLine"
        },
        "eslint.codeAction.showDocumentation": { // 在快速修复菜单中显示lint规则文档网页 默认为true
            "enable": true
        }
    }
    

  • 命令
    • Create ESLint Configuration：创建一个新.eslintrc.json文件。
    • Fix all auto-fixable problems：将ESLint自动修复解决方案应用于所有可修复的问题。
    • Disable ESLint：禁用ESLint扩展。
    • Enable ESLint：启用ESLint扩展。

• HTML CSS Support

  • 介绍: 该插件会扫描工作区中的css和scss文件, 并在别处书写类名或id名时给予提示, 支持语言包括: html, laravel-blade, razor, vue, pug, jade, handlebars, php, twig, md, nunjucks, javascript, javascriptreact.
    还有一款插件叫IntelliSense for CSS class names in HTML, 功能类似
  • 插件相关配置:
    • 支持指定远程样式表

      "css.remoteStyleSheets": [
          "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
      ]
      

    • 默认解析css和scss文件, 也可以配置样式表文件扩展名(好像配不配置没啥区别, 另外插件不支持less)

      	 "css.fileExtensions": ["css", "scss"]
      

  • 效果:
    

• Image preview

  • 介绍: 提供图片预览功能
  • 效果:
    

• open in browser

  • 介绍: 直接在浏览器中打开当前文件, 一般在html中使用
  • 快捷键:
    1. 通过默认浏览器打开: Ctrl+F1 或 通过右键 Open In Default Browser (默认快捷键是Alt+B)
    2. 通过其他浏览器打开: Shift+Alt+B 或 通过右键 Open In Other Browsers
  • 效果:
    

• Path Intellisense

  • 介绍: 文件路径智能提示
  • 插件相关配置:
    • 如果语句是import语句，则插件会默认删除文件扩展名。要启用文件扩展名，请将以下设置设置为true

      {
          "path-intellisense.extensionOnImport": true,
      }
      

    • 默认情况下，不显示隐藏文件。将其设置为true以显示隐藏文件。

      {
          "path-intellisense.showHiddenFiles": true,
      }
      

      设置为false，PathIntellisense也会忽略默认的“files.exclude”

      {
          "files.exclude": {
              "**/*.map.js": true
          }
      }
      

    • 默认情况下，自动完成不会在目录后添加斜杠。

      {
          "path-intellisense.autoSlashAfterDirectory": false,
      }
      

    • 默认情况下，绝对路径会按当前工作空间根路径解析。将其设置为false绝对路径以磁盘根路径解析。

      {
          "path-intellisense.absolutePathToWorkspace": true,
      }
      
      ### Mappings
      也可以自定义路径的解析
      {
          "path-intellisense.mappings": {
              "/": "${workspaceRoot}",
              "lib": "${workspaceRoot}/lib",
              "global": "/Users/dummy/globalLibs"
          },
      }
      

  • 效果:
    

• Setting Sync

  • 介绍: VSCode 插件及配置等同步工具
  • 使用方法
    详细使用方法: Settings-Sync
  • 快捷键:
    • 上传配置快捷键: Shift + Alt + U
    • 下载配置快捷键: Shift + Alt + D

• Sublime Text Keymap and Setting Importer

  • 介绍: 把 Sublime 的快捷键映射到VSCode

• TortoiseSVN

  • 介绍: 在VSCode中直接使用SVN功能, 可以自己配置快捷键
  • 效果:
    

• Trailing Spaces

  • 介绍: 高亮显示拖尾空格
  • 快捷键: 可以添加快捷键Alt+Shift+T, 一次删除所有拖尾空格.

    {
        "key": "alt+shift+t",
        "command": "trailing-spaces.deleteTrailingSpaces",
        "when": "editorTextFocus"
    }
    

  • 插件相关设置:
    • 可以隐藏当前行的高亮拖尾空格

      {
          "trailing-spaces.highlightCurrentLine": false
      }
      

    • 更过配置Trailing Spaces
  • 效果:
    

• vscode-icons

  • 介绍: vscode的图标插件, 提供更丰富的图标

Vue 插件

• Vetur
  • 介绍: Vue开发辅助插件, 提供代码高亮, Vue代码片段, Emmet语法, 代码检查, 代码格式化, 自动补全, 调试等功能.