vsCode安装 的随笔一记

vsCode 的安装遇到的问题，随笔一记：

Notes：每次安装后打开vsCode重启一下。

1.百度下载，按步骤安装即可。

2.自动集成了Emmet插件，但是快捷键需要修改，点开文件F--首选项 p-- 键盘快捷方式  修改键盘快捷键

3. 安装路径提示或路径补全插件， Path Autocomplete 点击 Path Autocomplete - Visual Studio Marketplace，打开下载，把vsCode先关闭，安装下载的文件，安装完后打开vsCode，安装完后，vsCode变成了英文，需要汉化的转第五步。

4.安装浏览器快捷键，点击左侧第五个按钮，搜索 view-in-browser，点击 install，然后点击reload即可。点开看的话，点击左边的第一个按钮，然后点击你要打开的html右击选择view in browser即可

5.英文变为中文 要在Ctrl shfit p 里面输入 configur language，打开的文件配置修改一下，英文 输入 en-Us；

如需配置中文输入：zh-CN

========2023-2-16=========后续跟进==vscode配置=======

Visual Studio Code的安装与配置

1.所需软件：VSCodeUserSetup-x64-1.36.1.exe

2.安装Visual Studio Code及扩展

1. 需安装的插件

Auto Close Tag

Auto Rename Tag

Beautify

ESLint

JavaScript (ES6) code snippets

Vetur

（2）需卸载的插件

TSLink Vue

（3）建议安装的主题扩展

Chinolor

单击左侧的方形扩展图标，打开扩展商店； 在搜索栏中输入：TSLint Vue，卸载后点击重新加载按钮；

如果未发现要卸载的插件，可跳过此步骤！

3.配置Visual Studio Code的代码格式化

• 点击菜单 文件 --> 首选项 --> 设置 --> 编辑器中的大括号； 复制如下内容并替换setting.json 中的设置：

{
  "editor.fontSize": 16,
  "editor.tabSize": 2, // 编辑器缩进设置
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.formatOnPaste": true, // 粘贴时自动格式化
  "javascript.preferences.quoteStyle": "single", // js格式化为单引号
  "typescript.preferences.quoteStyle": "single", // ts格式化为单引号
  // ↓↓beutify插件设置
  "beautify.config": {
    "indent_size": 2, // js自动格式化缩进设置
    "end_with_newline": true, // 文件结束时增加空行
    "brace_style": "collapse,preserve-inline", // 大括号格式化设置
    "wrap_line_length": 120
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html", // vetur插件格式化html设置
  "vetur.format.defaultFormatter.js": "vscode-typescript", // vetur插件格式化js设置
  "vetur.format.defaultFormatter.ts": "vscode-typescript", //vetur格式化typescript设置
  // ↓↓vetur默认格式化设置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto", // 使html代码的属性保持在行内，除非达到最大行宽，否则不折行
      "wrap_line_length": 120    // 最大行宽
    }
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  "explorer.confirmDelete": false,
  "node-workspace-builder.buildModulesWithoutInstall": true,
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "html.format.wrapLineLength": 120,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "editor.wordWrapColumn": 120,
  "workbench.editor.enablePreview": false
}

• 关闭用户设置标签页；

4.创建工作区

打开VS Code，从菜单栏中选择文件 -> 打开文件夹并打开你的源代码文件夹，然后选择文件 -> 将工作区另存为，然后保存你的工作区。VS Code会在保存成功后自动从文件夹切换到你的工作区

或者你可以按照如下步骤直接创建VS Code工作区文件：

新建文件工作区名称.code-workspace，并输入如下内容：

{ "folders": [{ "path": "你的源码目录/leon-frame-first-front" }], "settings": {} }

保存，双击并选择使用Visual Studio Code打开。

VS Code会默认保存最近一次打开的工作区。

5.为工作区配置ESLint

从菜单栏中选择文件 -> 首选项 -> 设置，切换到工作区标签页（位于搜索栏的下方），然后点击右上角的{}按钮，进入JSON文件编辑模式。

或者你可以选择直接使用文本编辑器编辑你创建的工作区文件。

在settings节中增加如下内容（此预览包含完整的code-workspace文件内容）：

{
  "folders": [{
      "path": "你的源码目录/leon-frame-first-front"
    }],
  "settings": {
    "eslint.nodePath": "你的源码目录/leon-frame-first-front/leon-frame-webapp/node_modules"
  }
}

​​​​​​​