Visual Studio Code 环境配置

Posted on Edited on In
安装配置 Visual Studio Code

IDE 的选择

  • 不太好的Atom使用经验
    • 之前有过 atom 的使用和配置经验.
    • 结论是看上去啥都能支持, 结果啥都支持不好.
    • 各种插件的升级维护本身就会消耗很多精力, 而且越用越慢.
    • 之后, 自己就全面转向一站式的专用IDE. 如 pycharm.
  • 还是选了 Visual Studio Code
    • 网页开发入门初学, 没有大项目需求, 用着顺手就行.
    • 主要原因还是免费. WebStorm 和 PHPStorm 都是收费软件.
    • 仅仅作为编辑器使用, 也非常舒服, 且自带git版本管理.
  • 需求确定
    • 将 VS Code 定位为网页开发和远程开发主力IDE. 并兼容运行单文件其它语言.
    • 支持 markdown 的编辑和打印
    • 支持远程开发, 如 putty 连接远程服务器
    • 支持运行调试: PHP, Go, JavaScript, React, Vue
    • 支持直接运行 c/c++, python 等单文件, 直接看结果.
    • 尽量用默认配置, 仅使用必要的官方插件/高下载高评价插件.
  • 清空旧有版本
    • 卸载vscode
    • 删除 C:\Users\xxx\.vscode 文件夹
    • 删除 C:\Users\xxx\AppData\Roaming\code 文件夹
    • 即可准备全新安装.

VS Code 及其扩展的安装

VS Code 的安装

  • 官网下载 安装, 没什么好说的.
  • 打开后, 选一个喜欢的主题, 我会选暗色主题.
    • 右下的账号按钮, 建议开启同步功能.
    • 右下的设置按钮, 建议添加好常用的工作目录作为信任文件夹.
    • 右侧活动栏, 对项目按需显隐和排序.
  • 解决 VS Code 在此系统上禁止运行脚本的报错
    • 管理员身份运行 window.powershell
    • 执行：get-ExecutionPolicy，显示 Restrict，表示状态是禁止的；
    • 执行：set-ExecutionPolicy；
    • 提示输入参数，输入：RemoteSigned；
    • 提示进行选择，输入：Y；
    • 检查：执行get-ExecutionPolicy,显示 RemoteSigned。

VS Code 扩展(插件)的选择

  • 快捷键
    • Eclipse Keymap, 自己统一使用eclipse模式快捷键
    • Ctrl+Shift+P, 打开命令面板
  • MarkDown:
    • Markdown PDF
    • Markdown Preview Enhanced
    • Markdown Table Prettifier
  • git:
    • gitLens
    • Git History
    • gitignore
      • 使用: 命令面板(Ctrl+Shift+p)输入 add gitignore
  • XML和CSV:
    • XML Tools
    • Rainbow CSV
    • Auto Close Tag
    • Auto Rename Tag, 偷懒装此扩展(VSCode可修改配置实现)
  • PHP:
    • PHP Debug
    • PHP Intelephense
  • Golang:
    • Go
  • Node.js, 按需选择
    • ESLint
    • Search node_modules, 扩展设置中可指定搜索路径
    • JavaScript (ES6) Snippets
    • NPM IntelliSense
    • Path IntelliSense
    • open in browser
    • Auto Import
    • File Peek, 快速跳转到工程内文件.
    • CSS Peek
    • Sass
  • React, 按需选择
    • Node.js 的扩展
    • ES7+ React/Redux/React-Native snippets
    • 参考 Using React in Visual Studio Code
    • 终端运行 npx create-react-app my-app 创建项目, 第一次执行会询问是否安装 create-react-app.
    • 终端按照提示, 依次输入 cd my-app, npm start
    • 浏览器打开 http://localhost:3000/ 会显示 React 图标. 创建项目成功.
  • Vue.js, 按需选择
    • Node.js 的扩展
    • Vue Language Features (Volar)
    • Vue 3 Snippets
    • Vite, VS Code for Vite
    • 配置请参考: Vue.js 官方安装文档
  • uniapp, 按需选择
    • Node.js 的扩展
    • uni-helper
    • uni-create-view
    • 自己多测试吧, 相关扩展都不太成熟.
    • uniapp项目建议用 HBuilderX 编译调试.
  • 远程开发
    • Remote - SSH
      • 本地需要ssh客户端支持, 譬如安装git.
      • 命令格式: ssh name@ip_address, 然后登录输入密码.
    • Remote - SSH: Editing Configuration Files
    • Remote - WSL, 在windows下提供近似的Linux的环境.
    • Remote - Containers
  • 其它语言, 按需选择:
    • C/C++,
      • 打开 Settings 或者 Extension Settings
      • 搜索 @ext:ms-vscode.cpptools C_Cpp.clang_format_fallbackStyle:
      • 将值改为: {BasedOnStyle: Google, IndentWidth: 4, ColumnLimit: 0}
    • REST Client
      • 仅识别.http和.rest文件, 点击Send Request
  • 辅助工具
    • Todo Tree
      • 扩展设置内勾选 Highlights:Use Colour Scheme
      • General:Tags 大写改为小写
    • Code Runner
      • 打开 Settings 或者 Extension Settings
      • 搜索 @ext:formulahendry.code-runner Code-runner: Run In Terminal
      • 勾选 Whether to run code in Integrated Terminal.
      • 需要配置各语言的运行环境
    • IntelliCode
    • Code GPT (2023年3月20日更新)
      • 打开 Open AI 账户, 生成一个密钥.
      • VS Code 中按 command+shift+p打开面板
      • 搜索并选择 CodeGPT: set API key
      • 在弹出框中填入密钥, 然后回车

VS Code 的配置

VS Code 扩展运行环境的配置

  • PHP 运行环境:
    • PHP官网解压安装 VS16 x64 Thread Safe PHP, 然后配置好环境变量.
    • 如果要全套本地开发环境, 官网推荐安装包: XAMPP建站集成软件包.
    • 终端输入 php --version 测试. 返回版本号即配置完成
    • 就能顺利使用 Code Runner 运行php文件了
  • Golang 运行环境:
    • Golang官网 下载并安装.
    • 终端输入 go version 测试. 返回版本号即配置完成
    • 更新Go工具: 命令面板(Ctrl+Shift+p)输入go tool, 点击运行 Go: Install/Update tools.
    • 然后选择所有Go工具, 并等待安装或更新.
    • 参考: 配置 Visual Studio Code for Go 开发
  • JavaScript 运行环境: Node.js
    • Node.js 官网下载 并安装
    • 终端输入 node --version 和 npm --version 测试, 返回版本号即配置完成
    • 就能顺利使用 Code Runner 运行js文件了
  • TypeScript 运行环境:
    • 先搭建好 JavaScript 的运行环境
    • 终端运行 npm install -g typescript
    • 终端运行 npm install -g ts-node
    • 终端输入 ts-node --version 测试, 返回版本号即配置完成
    • 就能顺利使用 Code Runner 运行ts文件了
  • python 运行环境:
    • Python 官网 下载安装, 然后配置好环境变量.
    • 终端输入 python --version 测试, 返回版本号即配置完成
    • 就能顺利使用 Code Runner 运行py文件了
  • C/C++ 运行环境:
    • 下载安装 MinGW for Windows, 然后配置好环境变量
    • 终端输入 gcc --version 测试, 返回版本号即配置完成
    • 就能顺利使用 Code Runner 运行c/c++文件了
  • REST Client, 保存为.http或.rest.
    • 点击 Send Request 即可. 或右键选择.
    • 支持转换为curl命令和代码, 支持变量.
    • 更多配置移步: 详细说明和文档
    • 简单的参考文件模板如下:
      https://draapho.github.io/

      ###
      GET https://draapho.github.io/

      ###
      POST https://reqbin.com/echo/post/json HTTP/1.1
      content-type: application/json; charset=utf-8

      {
          "Id": 78912,
          "Customer": "Jason Sweet"
      }

远程开发配置的参考资料

根据使用环境切换配置文件

  • 需求: 根据不同的语言/工作目录方便地切换配置文件, 实现尽可能少的加载扩展便于快速启动, 减少可能的冲突.
  • 写此文时, 安装版本 1.70.0. 官方尚在开发此功能. 相信很快就会发布到稳定版.
  • 请参考官方资料: Updates: Settings Profiles

原创于 DRA&PHO