VScode RN typescript 代码格式化插件 vscode格式化文档插件

个人配置

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.detectIndentation": false,
  "eslint._legacyModuleResolve": true,
  "eslint.alwaysShowStatus": true,
  //配置eslint
  "eslint.autoFixOnSave": true,
  "editor.fontSize": 14,
  "editor.fontFamily": "Consolas",
  //换行
  "editor.wordWrap": "on",
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "editor.useTabStops": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.options": {
    "plugins": ["html"]
  },
  //关闭自动更新扩展
  "extensions.autoUpdate": false,
  "files.trimTrailingWhitespace": false,
  "files.autoSaveDelay": 3000,
  // gitlens配置
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": true,
    "suppressCommitNotFoundWarning": true,
    "suppressFileNotUnderSourceControlWarning": true,
    "suppressGitVersionWarning": true,
    "suppressLineUncommittedWarning": true,
    "suppressNoRepositoryWarning": true,
    "suppressResultsExplorerNotice": true,
    "suppressShowKeyBindingsNotice": true
  },
  "git.confirmSync": false,
  "html.format.indentInnerHtml": true,
  "html.validate.scripts": true,
  "typescript.validate.enable": true,
  "javascript.validate.enable": true,
  "javascript.format.enable": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "css.validate": false,
  "less.validate": false,
  "search.followSymlinks": false,
  "scss.validate": true,
  "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
  "typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  //右键格式化文件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.validation.template": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "vscode-icons",
}

VS Code JavaScript(ES6) snippets ：

JavaScript Snippets ：

vetur ：

VueHelper ：

IntelliJ IDEA Keybindings ：

HTML Snippets ：

HTML CSS Support ：

Csscomb：css 、less、sass 的代码格式化；

Guides：

Debugger for Chrome ： 让 vscode 映射 chrome 的 debug 功能，静态页面都可以用 vscode 来打断点调试，需要另外配置，有点麻烦；

jQuery Code Snippets ：

vscode-icon ：

Path Intellisense ：

Npm Intellisense ：

ESlint ：

HTMLHint ：

Project Manager ：

beautify ：

Atuo Rename Tag ：

GitLens ：

Bracket Pair Colorizer ： 让括号拥有独立的颜色，易于区分。可以配合任意主题使用；

CSS Peek ：

File Peek：

Vue Peek：

Prettier ：

koroFileHeader：自动生成头部注释

注：ESlint 代码格式仍然报错解决方法

vscode 在设置中搜索行尾，选择 LF，已创建的文件右下角直接切换, 或者.eslintrc.js 文件的 rules 字段添加 'linebreak-style': ['off', 'windows']

GitLens: 虽然Git功能已内置于 VS Code 中，但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能，可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说，这个扩展插件会让你拥有全新的视觉感受。

Bracket Pair Colorizer 2: Bracket Pair Colorizer 2 是一个简单的扩展，可以使代码更容易阅读。它可以对匹配括号的对代码着色，使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。

---

• live server
• live share
• Live Sass Compilerritwickdey

• colorize
• CSS Blocks