vscode 安装配置

vscode 安装配置

Visual Studio Code 简称 VS Code，是一款功能强大的代码编辑器，VSCode 需要安装平台相应的编译器和语言的扩展。

下载 VScode

官网下载：https://code.visualstudio.com/

vscode 格式化配置

{
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.enablePreview": false,
  "workbench.colorCustomizations": {
    "[Default Light Modern]": {},
    "editorError.foreground": "#00000000",
    "editorWarning.foreground": "#00000000",
    "editorInfo.foreground": "#00000000"
  },
  "editor.tokenColorCustomizations": {
    // 注释颜色
    "comments": "#6fd89d"
  },
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.autoStash": true,
  "git.suggestSmartCommit": false,
  "editor.fontSize": 12,
  "editor.codeActionsOnSave": {
    // 是否自动保存格式化
    "source.fixAll": false,
    // this allows ESLint to auto fix on save
    "source.fixAll.eslint": false,
    // 按照字母顺序自动调整import导入
    "source.organizeImports": false
  },
  // 是否允许自定义的snippet片段提示
  "editor.snippetSuggestions": "top",
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  "editor.renderWhitespace": "none",
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.minimap.enabled": true,
  "[less]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //eslint 代码自动检查相关配置
  "eslint.run": "onSave",
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "eslint.codeAction.showDocumentation": {
    "enable": false
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.codeAction.disableRuleComment": {},
  "eslint.autoFixOnSave": true,
  "files.autoSave": "off",
  "files.autoSaveDelay": 100,
  "files.associations": {
    "*.vue": "vue",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  //按tab键功能
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "wxml": "html",
    "javascript": "javascriptreact"
  },
  // prettier配置 --- 使用单引号
  "prettier.singleQuote": true,
  // prettier配置 --- 结尾不加分号
  "prettier.semi": false,
  //末尾逗号
  "prettier.trailingComma": "none",
  "prettier.proseWrap": "never",
  "prettier.endOfLine": "lf",
  // prettier配置 --- 每行最多显示的字符数
  "prettier.printWidth": 1000,
  "prettier.htmlWhitespaceSensitivity": "strict",
  // 语法检测
  "vetur.validation.template": false,
  "vetur.experimental.templateInterpolationService": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 100,
      // - auto: 仅在超出行长度时才对属性进行换行。
      // - force: 对除第一个属性外的其他每个属性进行换行。
      // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
      // - force-expand-multiline: 对每个属性进行换行。
      // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
      "wrap_attributes": "force-expand-multiline",
      "end_with_newline": false
    },
    "prettyhtml": {
      "printWidth": 1000,
      "singleQuote": false,
      "wrapAttributes": true,
      "sortAttributes": true
    }
  },
  "code-runner.runInTerminal": true,
  "code-runner.saveFileBeforeRun": true,
  "html.format.contentUnformatted": "pre",
  "html.format.wrapAttributes": "force",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "minapp-vscode.disableAutoConfig": true,
  "gitlens.advanced.blame.customArguments": [],
  "gitlens.views.branches.branches.layout": "list",
  "bracketPairColorizer.activeScopeCSS": ["borderStyle : solid", "borderWidth : 1px", "borderColor : {color}; opacity: 0.5"],
  "security.workspace.trust.untrustedFiles": "open",
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "explorer.confirmDelete": false,
  "prettier.arrowParens": "avoid",
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.fontWeight": "normal",
  "window.zoomLevel": 1
}

扩展

• Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  vscode 设置中文界面的方法：

  1、打开vscode，按【ctrl+shift+p】组合键；
  
  2、搜索并选择【configure display language】；
  
  3、安装中文简体语言，并重启vscode即可。
  

• Local History
  保存历史文件

• Auto-CloseTag
  自动添加刚刚添加的起始标签的右括号

• ESLint / TSLint
  自动格式化代码，以便在整个团队中实现一致的格式化。ESLint 也可以配置为自动格式化代码，无论何时出现错误，它都会发出一连串的警告。

• Path Intellisense
  当尝试在引文中输入一条路径时，智能感知会自动填写或显示建议。路径智能感知还可以帮助自动完成所有隐藏文件。

• Javascript (ES6) Code Snippets
  只需键入快捷代码，即可看到整个通用代码自动输入到编辑器中。该扩展不仅支持 Javascript ES6，还支持 Typescript、Reactjs、Vue 和 HTML。

• LiveServer
  打开当前项目的 Live web 服务器。只需右击并打开运行 live server，便会自动完成剩余的工作。

• Code Runner
  能够运行多种编程语言的代码文件和代码片段。

• GitLens
  Git 源代码控制

• SVN
  SVN 源代码控制

• Prettier
  代码格式化工具，正确地缩进和分隔

• 小霸王
  在线支持几十款游戏