如何使用vscode进行代码格式化设置. |
您所在的位置：网站首页 › 二维码生成代码格式怎么设置不了 › 如何使用vscode进行代码格式化设置. |
如何使用vscode进行代码格式化设置.
|
1. 如何使用vscode进行代码格式化设置
1.1. 步骤 1：安装必要的插件
1.1.1. 进入扩展市场1.1.2. 搜索并安装插件： 1.2. 步骤 2：配置设置
1.2.1. 打开设置：1.2.2. 启用格式化保存：1.2.3. 配置ESLint：1.2.4. 配置Prettier与ESLint集成： 1.3. 步骤 3：格式化代码
1.3.1. 手动格式化：1.3.2. 保存时自动格式化： 2. VScode 格式化代码实现实例
2.1. 格式化代码快捷键2.2. 准备插件2.3. 个性化配置
2.3.1. 开发方式（下面是三种方式）2.3.2. 个性化配置（文件setting.json） 2.4. 按Ctrl + s保存setting.json文件 重启编译器
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 + FOn Mac: Shift + Option + FOn 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 |
【本文地址】
今日新闻 |
推荐新闻 |