如何使用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}

2.4. 按Ctrl + s保存setting.json文件 重启编译器

按快捷键：Shift + Alt + F 自动格式化代码，如果不生效 按Ctrl + s