前端常用vscode插件

打开vscode配置

command+shift+P  选择Open User Setting（首选项：打开用户设置(JSON)）

1 Prettier - Code formatter

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

"editor.defaultFormatter": "esbenp.prettier-vscode"

意思就是使用上面的格式插件。esbenp.prettier-vscode值就代表 Prettier - Code formatter 插件。

如果使用其他格式化插件，那么只需要修改esbenp.prettier-vscode值为对应的插件配置就行。

拓展：

"editor.formatOnSave": true, //保存时自动格式化

问题1：自己配置之后自动格式化死活不生效？

解决：重启vscode，然后随便修改一下setting文件，保存就好了。

问题2：自己配置之后自动格式化死活不生效,并且vscode有报错？

解决：上面意思就是在执行格式化时候Prettier报错了，错误信息找不到Prettier，所以需要我们在项目下面安装Prettier，执行

npm install prettier -D --save-exact

拓展：Umi项目不需要主动安装Prettier，是因为Umi项目本身就依赖这个包。

2 Chinese (Simplified) 

VS Code 的中文（简体）语言包

3 Code Spell Checker

检查单词是否拼写正确

4 别名路径跳转

别名路径跳转

其实不用下载这个插件只需要在根目录下增加jsconfig.json文件就行

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
      "@utils/*": ["./src/utils/*"],
      "@components/*": ["./src/components/*"],
      "@images/*": ["./src/images/*"]
    }
  }
}

5 Auto Rename Tag

修改前面标签，自动替换后面对应的标签

 

6 AutoFileName

导入文件时候提示可以导入哪些文件。

 

7 Better Comments

代码注释高亮

配置

{
"better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }
  ],
}

8 One Dark Pro

vscode桌面样式

配置

{
 "editor.fontFamily": "JetBrains Mono", //字体风格
 "workbench.colorTheme": "One Dark Pro", //主题颜色
}

9     Code Runner

直接在vscode里面执行代码

配置

{
    "code-runner.executorMap": {
        "javascript": "node ", // 等于执行  node '当前文件路径'
        "typescript": "ts-node",
        "php": "C:\\php\\php.exe",
        "python": "python",
        "perl": "perl",
        "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe",
        "go": "go run",
        "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"
    },
    "code-runner.runInTerminal": true, //code runner插件在终端运行
}

10 Material Icon Theme

设置文件图标主题

 配置

{
    "workbench.iconTheme": "material-icon-theme", // 文件图标风格
}

11 Trailing Spaces

现实代码尾部空格

 

12 SVG 

svg图标编辑和预览

13 SCSS IntelliSense

你能在应用的任何位置快速获取你发明的那些 SCSS 变量名。

 14 Path Intellisense

路径自动补全插件