如何使用vscode进行代码格式化设置.

前端布道人

于 2024-06-07 16:11:02 发布

阅读量3.6k

点赞数 11

分类专栏：前端杂货铺前端面试题文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/BradenHan/article/details/139529558

版权

前端杂货铺同时被 2 个专栏收录

287 篇文章 1 订阅

订阅专栏

前端面试题

157 篇文章 2 订阅

订阅专栏

1. 如何使用vscode进行代码格式化设置
2. VScode 格式化代码实现实例

1. 如何使用vscode进行代码格式化设置

在Visual Studio Code (VSCode) 中进行代码格式化设置是一个相对直接的过程，通常涉及安装必要的插件以及调整一些编辑器设置。

下面以配置 ESLint 和 Prettier 插件为例，说明如何进行代码格式化设置：

1.1. 步骤 1：安装必要的插件

1.1.1. 进入扩展市场

打开VSCode，点击左侧的扩展按钮（或通过 Ctrl+Shift+X 快捷键）进入扩展市场。

1.1.2. 搜索并安装插件：

搜索 ESLint 并安装。ESLint 是一个强大的代码检查工具，可以帮助你发现并修复代码中的错误和潜在问题。
搜索 Prettier 并安装。Prettier 是一个代码格式化器，可以自动格式化你的代码，保持一致的代码风格。

1.2. 步骤 2：配置设置

1.2.1. 打开设置：

点击左上角的文件菜单，选择“首选项” > “设置”（或者使用快捷键 Ctrl+,）。

1.2.2. 启用格式化保存：

在设置搜索框中输入 format on save，找到并勾选 "Editor: Format On Save" 选项。这会使VSCode在每次保存文件时自动进行格式化。

1.2.3. 配置ESLint：

搜索 ESLint: Auto Fix On Save，勾选此选项使ESLint在保存时自动修复代码问题。
可能还需要配置 "ESLint.validate" 设置，来指定哪些文件类型应用ESLint的校验和自动修复。例如：

"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
]

1.2.4. 配置Prettier与ESLint集成：

搜索 Prettier: Eslint Integration，勾选此选项以使Prettier与ESLint集成，确保两者协同工作，避免冲突。
如果需要，你还可以在设置中调整Prettier的具体配置，例如通过 "prettier.configPath" 指定一个自定义的 .prettierrc 文件路径。

1.3. 步骤 3：格式化代码

1.3.1. 手动格式化：

你可以使用快捷键 Shift+Alt+F（Windows/Linux）或 Shift+Option+F（Mac）手动格式化当前文档。

1.3.2. 保存时自动格式化：

按照上面的设置，现在当你保存文件时，VSCode会自动应用ESLint和Prettier的规则进行代码格式化。

以上步骤提供了基本的代码格式化设置，但请记住，具体的配置可能需要根据你的项目和个人偏好进行调整。例如，你可能需要在项目根目录创建 .eslintrc 和 .prettierrc 文件来进一步自定义规则。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

2. VScode 格式化代码实现实例

2.1. 格式化代码快捷键

Visual Studio Code可以通过以下快捷键格式化代码

On Windows: Shift + Alt + F
On Mac: Shift + Option + F
On Ubuntu: Ctrl + Shift + I

2.2. 准备插件

Vue - Official 提供vue代码片段、语法支持、代码高亮等
ESlint检查javascript语法检查和代码规范
Prettier - Code formatter 各种代码格式化

2.3. 个性化配置

2.3.1. 开发方式（下面是三种方式）

打开VS Code配置文件setting.json
快捷键ctrl + shirt + p，搜索Settings(JSON)
点击 文件 -> 首选页 -> 设置 （然后在右上角会出现一个翻页图标） -> 点击该图标打开文件setting.json

2.3.2. 个性化配置（文件setting.json）

{
  "workbench.sideBar.location": "left",
  "cssrem.rootFontSize": 80,
  "git.ignoreWindowsGit27Warning": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  //改变注释颜色
  // "editor.tokenColorCustomizations": {
  //   "comments": "#ff4f81" // 注释
  // }, 
    
    //导入文件时是否携带文件的扩展名
    "path-autocomplete.extensionOnlmport": true,
    //配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@": "${folder}/src"
    },
  //配置eslint
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  // "eslint.run": "onSave",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.mouseWheelZoom": true,
  "editor.minimap.renderCharacters": false,
  "debug.javascript.defaultRuntimeExecutable": {
    "pwa-node": "node"
  },
  "open-in-browser.default": "{\"open-in-browser.default\":\"Chrome\"}",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "[python]": {
    "editor.formatOnType": true
  },
  "editor.detectIndentation": false,
  "explorer.compactFolders": false,
  // html使用prettier格式化
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    // "editor.defaultFormatter": "Vue.volar"
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // json使用prettier格式化
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.tabSize": 2,
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "px2rem.rootFontSize": 64,
  "px2rem.autoRemovePrefixZero": false
}