VsCode 常用插件

一.Material Icon Theme

这款主题叫做 Material Icon Theme，它采用了 Google Material Design 风格，文件图标以及文件夹图标覆盖非常的全面。

而且在暗黑模式下使用效果更佳。

image

各种图标：

image

二.Auto Close Tag

image.png

• 自动添加HTML/XML关闭标记，与Visual Studio IDE或升华文本相同

三.Auto Rename Tag

image.png

• 自动重命名成对的HTML/XML标记

四.Bracket Pair Colorizer

image.png

• 一个可定制的扩展，用于为匹配的括号着色

五.Chinese (Simplified) Language Pack for Visual Studio Code

image.png

• 汉化

六.Code Runner

image.png

• 在编译器中右键运行各种格式的文件

七.Code Spell Checker

image.png

• 源代码拼写检查器

八.Docker

image.png

• 容器管理

九.ES7 React/Redux/GraphQL/React-Native snippets

image.png

• 使用ES7语法在JS/TS中对React、Redux和Graphql进行简单扩展

十.ESLint

image.png

• 格式校验工具

十一.JavaScript (ES6) code snippets

image.png

• ES6语法代码提示

十二.open in browser

image.png

• 右键运行html文件

十三.Path Intellisense

image.png

• 文件路径补全工具

十四 .Prettier - Code formatter

image.png

• 代码格式化工具

十五.Vetur

image.png

• vue代码格式化工具

十六.Simple React Snippets

image.png

• react代码提示

十七.React Native Tools

image.png

• react代码调试工具

十八.koroFileHeader

image.png

• 在vscode中用于生成文件头部注释和函数注释的插件

十九.Vue 3 Snippets

image.png

• vue3 语法提示

二十.GitLens — Git supercharged

image.png

二十一.Git History

image.png

二十二.Live Server

二十三 . Volar

二十四 .Better Comments

image.png

setting.json文件,包含头部注释,保存自动格式化代码等

{
  // "files.autoSave": "onFocusChange", //失去焦点自动保存
  "files.autoSave": "off",
  "json.format.enable": false,
  "javascript.preferences.quoteStyle": "single",
  "html.format.endWithNewline": true,
  "explorer.confirmDelete": false,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.fontLigatures": false,
  "editor.formatOnSave": true,
  "breadcrumbs.enabled": true,
  "editor.renderControlCharacters": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.fontSize": 16,
  "window.zoomLevel": 1,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "prettier.tabWidth": 2,
  "prettier.printWidth": 120,
  "fileheader.configObj": {
    "createFileTime": true,
    "language": {
      "languagetest": {
        "head": "/$$",
        "middle": " $ @",
        "end": " $/"
      }
    },
    "autoAdd": true,
    "autoAddLine": 100,
    "autoAlready": true,
    "annotationStr": {
      "head": "/*",
      "middle": " * @",
      "end": " */",
      "use": false
    },
    "headInsertLine": {
      "php": 2,
      "sh": 2
    },
    "beforeAnnotation": {
      "文件后缀": "该文件后缀的头部注释之前添加某些内容"
    },
    "afterAnnotation": {
      "文件后缀": "该文件后缀的头部注释之后添加某些内容"
    },
    "specialOptions": {
      "特殊字段": "自定义比如LastEditTime/LastEditors"
    },
    "switch": {
      "newlineAddAnnotation": true
    },
    "supportAutoLanguage": [],
    "prohibitAutoAdd": ["json"],
    "prohibitItemAutoAdd": ["项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"],
    "moveCursor": true,
    "dateFormat": "YYYY-MM-DD HH:mm:ss",
    "atSymbol": ["@", "@"],
    "atSymbolObj": {
      "文件后缀": ["头部注释@符号", "函数注释@符号"]
    },
    "colon": [": ", ": "],
    "colonObj": {
      "文件后缀": ["头部注释冒号", "函数注释冒号"]
    },
    "filePathColon": "路径分隔符替换",
    "showErrorMessage": false,
    "writeLog": false,
    "wideSame": false,
    "wideNum": 13,
    "functionWideNum": 0,
    "CheckFileChange": false,
    "createHeader": true,
    "useWorker": false,
    "designAddHead": false,
    "headDesignName": "random",
    "headDesign": false,
    "cursorModeInternal": false
  },
  // 文件头部注释
  "fileheader.customMade": {
    "Description": "",
    "Author": "xionglaifu",
    "Date": "Do not edit",
    "LastEditors": "xionglaifu",
    "LastEditTime": "Do not Edit",
    // "FilePath": "${file}",
    "company": "formssi"
  },
  //函数注释
  "fileheader.cursorMode": {
    "name": "",
    "test": "test font",
    "msg": "",
    "param": "",
    "return": ""
  },
  "editor.minimap.maxColumn": 280,
  "editor.quickSuggestions": null,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "launch": {
    "configurations": [],
    "compounds": []
  },
  "open-in-browser.default": "Google Chrome",
  // "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact", "html"],
  // "eslint.run": "onSave",
  // "eslint.alwaysShowStatus": false,
  // //  #让函数(名)和后面的括号之间加个空格
  // "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // // #让vue中的js按"prettier"格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "git.confirmSync": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  // //行尾分号取消，使用单引号
  // "vetur.format.defaultFormatterOptions": {
  //   "prettier": {
  //     "semi": false,
  //     "singleQuote": true
  //   }
  // },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.editorAssociations": {
    "*.zip": "default"
  },
  "workbench.iconTheme": "material-icon-theme"
}