前端vscode 环境初始化

前端

2023-11-22 03:56:39

安装vscode并设置用户界面

1.1 前往vscode官网下载并安装vscode。

1.2 安装完成后，启动vscode并根据个人喜好设置用户界面主题、字体和图标。

2. 安装必要插件

2.1 打开vscode扩展程序管理器，搜索并安装以下插件：

ESLint : 用于代码风格检查和格式化。
Prettier : 用于代码格式化和美化。
Debugger for Chrome : 用于调试前端代码。
Live Server : 用于实时预览前端页面。
GitLens : 用于查看代码历史记录和提交信息。

3. 配置代码格式化规则

3.1 在vscode中创建或打开项目文件夹。

3.2 在项目文件夹下创建.eslintrc.json文件，并添加以下配置：

{
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

3.3 在项目文件夹下创建.prettierrc文件，并添加以下配置：

{
  "semi": true,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "all"
}

4. 使用调试工具

4.1 在项目文件夹下创建launch.json文件，并添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

4.2 按下F5或点击运行按钮启动调试。

5. 使用实时预览工具

5.1 在项目文件夹下创建tasks.json文件，并添加以下配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Serve",
      "type": "shell",
      "command": "live-server",
      "args": ["."],
      "options": {
        "cwd": "${workspaceFolder}"
      }
    }
  ]
}