VSCode编辑器

重要通知

Help -> Toggle Developer Tools，即可像浏览器一样打开VSCode的代码查看功能。

基本概况

保持所有开发者安装了相同的插件和相同的配置，保持开发环境一致性。

官网：https://code.visualstudio.com/
GitHub：<>

用户区配置

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application\ Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

工作区配置

├─ .vscode
│ ├─ extensions.json
│ └─ settings.json

Vue生态技术栈插件

Vue3

Vue Language Features (Volar)

React生态技术栈插件

插件列表

GitHub Copilot

GitHub Copilot 扩展是一个 AI 对程序员工具，可帮助您更快、更智能地编写代码。可以使用 VS Code 中的 Copilot 扩展来生成代码，从它生成的代码中学习，甚至配置编辑器。

extensions.json

扩展VSCode编辑器，增加插件，在项目根目录创建.vscode目录，并且在该目录下创建extensions.json文件

配置文档

{
  "recommendations": []
}

settings.json

配置VScode编辑器选项，在项目根目录创建.vscode目录，并且在该目录下创建settings.json文件。

默认配置：https://code.visualstudio.com/docs/getstarted/settings#_workspace-settings

设置优先级

不同的设置范围可以在多个级别覆盖配置。在以下列表中，更高范围将覆盖早期范围。

默认设置：此范围表示默认的未配置设置值。
用户设置：全局应用于所有 VS Code 实例。
远程设置：应用于用户打开的远程计算机。
工作区设置：应用于打开的文件夹或工作区。
工作区文件夹设置：应用于多根工作区的特定文件夹。
特定于语言的默认设置：这些是特定于语言的默认值，可由扩展提供。
特定于语言的用户设置：与用户设置相同，但特定于语言。
特定于语言的远程设置：与远程设置相同，但特定于语言。
特定于语言的工作区设置：与工作区设置相同，但特定于语言。
特定于语言的工作区文件夹设置：与工作区文件夹设置相同，但特定于语言。
策略设置：由系统管理员设置，这些值始终覆盖其他设置值。

配置文档

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

  "editor.fontSize": 12,  // 字体
  "editor.wordWrap": "on",  // 换行
  "editor.tabSize": 2,  // Tab空格

  "eslint.enable": true,
  "eslint.debug": true,
  "eslint.run": "onSave",

  "files.autoSave": "onFocusChange",  // 失去焦点后自动保存，"afterDelay"

  "npm.packageManager": "yarn",

  // 保存时的代码操作
  "editor.formatOnSave": true,  // 保存时自动格式化
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true, // 保存时自动修复在一轮中计算所有可能的修复（对于包括 ESLint 在内的所有提供程序）
    "source.fixAll.eslint": true, // 自动修复仅适用于 ESLint
    "source.fixAll.stylelint": true
  },


  /**
   * 文件类型自定义编辑器
   * 例如html、typescript、markdown
   */
  "[html]": {},

  "[css]": {},

  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
		"editor.formatOnSave": true,
    "editor.showUnused": false // 在 JavaScript 中禁用未使用代码
  },

  "[vue]": {
    "editor.defaultFormatter": "Vue.volar",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.formatOnSave": false
  },


  // 校验
  "css.validate": true,
  "less.validate": true,
  "scss.validate": true,

    // 工作空间设置
  "workbench.colorCustomizations": {},

  // 在使用搜索功能时，将这些文件夹/文件排除在外
  "search.exclude": {
    "**/logs": true,
    "**/node_modules": true, 
    "**/bower_components": true,
		"cli/target/**": true,
		".build/**": true,
		"out/**": true,
		"out-build/**": true,
		"out-vscode/**": true,
		"i18n/**": true,
		"extensions/**/dist/**": true,
		"extensions/**/out/**": true,
		"test/smoke/out/**": true,
		"test/automation/out/**": true,
		"test/integration/browser/out/**": true,
		"src/vs/base/test/common/filters.perf.data.js": true,
		"src/vs/base/test/node/uri.test.data.txt": true,
		"src/vs/workbench/api/test/browser/extHostDocumentData.test.perf-data.ts": true,
		"src/vs/editor/test/node/diffing/fixtures/**": true,
  },

  // 这些文件将不会显示在工作空间中
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    ".git": true,
		".build": true,
		".profile-oss": true,
		".vscode-test": true,
		"cli/target": true,
		"build/**/*.js": {
			"when": "$(basename).ts" // ts编译后生成的js文件将不会显示在工作空中
		}
  }
}

参考文档

{
  // 核心：保存文件自动格式化
  "editor.formatOnSave": true,
  // 粘贴代码自动格式化（可选）
  "editor.formatOnPaste": true,
  // 默认全局格式化器为Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 保存时自动修复ESLint可修复的语法/规范错误（TS/JS必备）
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // 给不同文件类型单独指定格式化器，避免失效
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Prettier全局规则（可按需修改）
  "prettier.singleQuote": true,        // 使用单引号
  "prettier.tabWidth": 2,              // 缩进2空格
  "prettier.trailingComma": "es5",     // 末尾逗号
  "prettier.semi": true,               // 语句末尾加分号
  "prettier.printWidth": 100,          // 单行最大长度

  // 可选：失去焦点自动保存文件
  "files.autoSave": "onFocusChange"
}

.editorconfig

官网：https://editorconfig.org/

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

package.json

{
  "scripts": {
    "dev": "vite",
    "build-": "vite build",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  }
}

Code Server安装配置与部署使用

在线实时编辑版：https://vscode.dev/
GitHub: https://github.com/microsoft/vscode
官网：https://code.visualstudio.com/
GitHub：https://github.com/cdr/code-server
版本：https://github.com/cdr/code-server/releases

知识技巧

查看源码：Help - Toggle Developer Tools

安装配置

基础安装

# wget下载很慢，建议本地下载后再上传至服务器

# 下载
wget https://github.com/coder/code-server/releases/download/v4.118.0/code-server-4.118.0-linux-amd64.tar.gz

# 上传
put D:/Download/code-server-4.118.0-linux-amd64.tar.gz /home/download
put /Users/dey/Downloads/code-server-4.118.0-linux-amd64.tar.gz /home/download

# 解压
tar zxvf code-server-4.118.0-linux-amd64.tar.gz
mv code-server-4.118.0-linux-amd64 /home/code-server-4.118.0-linux-amd64
cd /home/code-server-4.118.0-linux-amd64/bin  

# 任意IP都可以访问，注意：通过https://x.x.x.x访问，需要执行 ./code-server --cert --port 8011 --host 0.0.0.0
./code-server --port 8011 --host 0.0.0.0




# 云IDE默认使用https进行连接 
> 如果不启用 https 时，由于安全因素，会导致无法启用剪贴板

密码配置

# 第一次安装配置后，打开网站，需要设置密码，具体信息如下
Welcome to code-server
Please log in below. Check the config file at ~/.config/code-server/config.yaml for the password.
密码信息展示：auth: password | password: a5b921cfe8583956b4390d2d

# 修改密码，找到密码配置文件
vim ~/.config/code-server/config.yaml | password: Eshen_1245_ysun


/root/.config/code-server/config.yaml

查看指令具体功能

./code-server --help

配置域名

# 解决websocket的1006超时问题：利用Upgrade协议头机制将连接从HTTP连接升级到WebSocket连接，在nginx配置中修改

http {
  map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
  }
  server {
    location / {
      # proxy_http_version 1.1;
      proxy_set_header   Upgrade          $http_upgrade;
      proxy_set_header   Connection       "Upgrade";
    }
  }  
}

设置code-server在后台运行

> yum install -y screen

# 步骤一：code-server为自定义命名，打开了一个新screen窗口，然后进行步骤二
> screen -S code-server  
> cd /home/code-server-4.118.0-linux-amd64/bin

步骤二：开启code-server服务
> ./code-server --cert --port 8011 --host 0.0.0.0 

# 最后按组合键：ctrl + a + z退出即可   // 一定先按Ctrl + A，然后在按住前两者的基础上按下Z

screen -S vscode 参数说明

> -A 　# 将所有的视窗都调整为目前终端机的大小。
> -d   # <作业名称> 　将指定的screen作业离线。
> -h   # <行数> 　指定视窗的缓冲区行数。
> -m 　# 即使目前已在作业中的screen作业，仍强制建立新的screen作业。
> -r  # <作业名称> 　恢复离线的screen作业。
> -R 　# 先试图恢复离线的作业。若找不到离线的作业，即建立新的screen作业。
> -s 　# 指定建立新视窗时，所要执行的shell。
> -S  # <作业名称> 　指定screen作业的名称。
> -v 　# 显示版本信息。
> -x 　# 恢复之前离线的screen作业。
> -ls或--list 　# 显示目前所有的screen作业。
> -wipe 　# 检查目前所有的screen作业，并删除已经无法使用的screen作业。

常用screen指令

screen -S session_name           # 新建一个叫session_name的session
screen -ls（或者screen -list）    # 列出当前所有的session
screen -r session_name           # 回到session_name这个session
screen -d session_name           # 远程detach某个session
screen -d -r session_name        # 结束当前session并回到session_name这个session
screen -X -S 19520 quit          # 删除

在每个screen session 下，命令都以 ctrl+a、ctrl-a，常用的几个操作如下：

> ctrl-a x   # 锁住当前的shell window，需用用户密码解锁
> ctrl-a d   # detach，暂时离开当前session，将当前 screen session 转到后台执行，并会返回没进 screen 时的状态，此时在 screen session 里，每个shell client内运行的 process (无论是前台/后台)都在继续执行，即使 logout 也不影响
> ctrl-a z   # 把当前session放到后台执行，用 shell 的 fg 命令则可回去。

VSCode编辑器

基本概况

用户区配置

工作区配置

推荐默认插件

基础插件

代码运行：Code Runner

GitLens — Git supercharged

HTML/CSS/JavaScript 自动补全：HTML/CSS/JavaScript Snippets

Prettier - Code formatter

HTML CSS Support

ESLint

CSScomb

JSON Organizer

Vue生态技术栈插件

Vue3

React生态技术栈插件

插件列表

extensions.json

推荐配置

配置文档

settings.json

设置优先级

推荐配置

配置文档

参考文档

.editorconfig

package.json

Code Server安装配置与部署使用

知识技巧

安装配置

基础安装

密码配置

查看指令具体功能

配置域名

设置code-server在后台运行

screen -S vscode 参数说明

常用screen指令

在每个screen session 下，命令都以 ctrl+a、ctrl-a，常用的几个操作如下：

VSCode编辑器 ​

基本概况 ​

用户区配置 ​

工作区配置 ​

推荐默认插件 ​

基础插件 ​

代码运行：Code Runner ​

GitLens — Git supercharged ​

HTML/CSS/JavaScript 自动补全：HTML/CSS/JavaScript Snippets ​

Prettier - Code formatter ​

HTML CSS Support ​

ESLint ​

CSScomb ​

JSON Organizer ​

Vue生态技术栈插件 ​

Vue3 ​

React生态技术栈插件 ​

插件列表 ​

extensions.json ​

推荐配置 ​

配置文档 ​

settings.json ​

设置优先级 ​

推荐配置 ​

配置文档 ​

参考文档 ​

.editorconfig ​

package.json ​

Code Server安装配置与部署使用 ​

知识技巧 ​

安装配置 ​

基础安装 ​

密码配置 ​

查看指令具体功能 ​

配置域名 ​

设置code-server在后台运行 ​

screen -S vscode 参数说明 ​

常用screen指令 ​

在每个screen session 下，命令都以 ctrl+a、ctrl-a，常用的几个操作如下： ​

VSCode编辑器

基本概况

用户区配置

工作区配置

推荐默认插件

基础插件

代码运行：Code Runner

GitLens — Git supercharged

HTML/CSS/JavaScript 自动补全：HTML/CSS/JavaScript Snippets

Prettier - Code formatter

HTML CSS Support

ESLint

CSScomb

JSON Organizer

Vue生态技术栈插件

Vue3

React生态技术栈插件

插件列表

extensions.json

推荐配置

配置文档

settings.json

设置优先级

推荐配置

配置文档

参考文档

.editorconfig

package.json

Code Server安装配置与部署使用

知识技巧

安装配置

基础安装

密码配置

查看指令具体功能

配置域名

设置code-server在后台运行

screen -S vscode 参数说明

常用screen指令

在每个screen session 下，命令都以 ctrl+a、ctrl-a，常用的几个操作如下：