vscode 保存时按eslint自动格式化部分代码

1) First, you need to install the ESLint extension in the VS code.

This extension uses the ESLint library.If you haven't installed ESLint either locally or globally do so by running

npm install eslint //For a local install
 or 
npm install -g eslint //For a global install.

2) Then, open Setting.json file in VS code. by File-> Preferences->Settings.

3) Add following setting.

 {
    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [".js",".vue"]
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
     {
      "language": "html",
      "autoFix": true
     },
     { "language": "vue", "autoFix": true },
     { "language": "js", "autoFix": true }
   ],

}

 

4) Now, check your vue file.It will start showing linting error.If not, restart the VS code.

5) eslint --init

转载于:https://www.cnblogs.com/wtaog/p/9317208.html

<think>我们正在处理用户关于在VSCode中配置保存时自动格式化代码的问题。用户已经提供了一些引用,但我们需要根据这些引用和之前的知识来回答。 关键点: 1. 用户希望实现保存时自动格式化代码。 2. 引用[1]提到了使用ESLint+Prettier,并配置保存时自动格式化和修复。 3. 引用[3]给出了一个配置:在settings.json中添加"editor.codeActionsOnSave": { "source.fixAll.eslint": true },这用于ESLint自动修复。 4. 引用[2]是关于配置bash和git以及设置扩展目录的,与当前问题关系不大。 5. 引用[4]是关于C/C++配置文件的格式说明,与当前问题关系不大。 因此,我们可以提供两种主要方法: 方法1:使用Prettier(如之前回答的) 方法2:使用ESLint(如果项目已经配置了ESLint) 我们将结合引用[1]和引用[3]来提供ESLint的配置方法。 步骤: 1. 安装必要的扩展:Prettier和ESLint。 2. 配置保存时自动格式化,可以选择使用Prettier作为格式化工具,或者使用ESLint来修复问题。 3. 如果需要,可以配置Prettier和ESLint的规则,避免冲突。 注意:用户可能使用不同的语言或工具,因此我们提供通用的方法,并说明如何针对不同情况调整。 我们将按照以下结构回答: - 方法一:使用Prettier(通用格式化工具) - 方法二:使用ESLint(适用于JavaScript/TypeScript等项目) - 可选配置:解决Prettier和ESLint的冲突 - 测试验证 - 常见问题 最后,生成相关问题。 注意:用户之前的问题和我们的回答已经详细说明了Prettier的配置,所以这里可以简要提一下,重点补充ESLint的方法。</think>### VSCode 保存时自动格式化代码配置指南 通过以下配置可实现保存文件时自动格式化代码(支持 JavaScript/TypeScript/Python/HTML/CSS 等主流语言),**无需手动触发**。根据需求选择方案: --- #### ✅ 方案一:使用 Prettier(通用格式化工具) **适用场景**:多语言统一风格、简单配置 1. **安装扩展** - 扩展市场搜索安装 [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 2. **开启保存时格式化** - 打开设置 (`Ctrl+,`) → 搜索 `format on save` → 勾选 **`Editor: Format On Save`** ![开启保存格式化](https://i.imgur.com/5fG3t7g.png) 3. **设置默认格式化器** - 搜索 `default formatter` → 选择 **`esbenp.prettier-vscode`** 4. **自定义规则**(可选) 在项目根目录创建 `.prettierrc`: ```json { "semi": true, // 强制分号 "singleQuote": true, // 使用单引号 "tabWidth": 2 // 缩进2空格 } ``` --- #### ✅ 方案二:使用 ESLint(JS/TS 项目专用) **适用场景**:需同时进行代码质量检查和格式化的 JS/TS 项目 1. **前置条件** - 安装 [ESLint 扩展](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - 项目已配置 ESLint(含 `eslint-plugin-prettier`) 2. **关键配置** 在 `.vscode/settings.json` 添加: ```json { "editor.codeActionsOnSave": { "source.fixAll.eslint": true // 保存时触发ESLint自动修复 }, "eslint.format.enable": true // 允许ESLint处理格式化 } ``` > 此配置会调用 ESLint 的 `--fix` 能力自动修复代码风格问题[^1][^3] --- #### 🛠 混合方案:ESLint + Prettier 协作 **解决规则冲突**:当 ESLint 与 Prettier 规则不一致时 1. 安装依赖: ```bash npm install eslint-config-prettier eslint-plugin-prettier --save-dev ``` 2. 在 ESLint 配置 (`.eslintrc.js`) 中扩展 Prettier: ```js module.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' // 将Prettier规则作为ESLint规则应用 ] } ``` 3. VS Code 配置(`.vscode/settings.json`): ```json { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } } ``` > 此时 Prettier 负责格式化ESLint 负责质量检查,规则通过 `eslint-config-prettier` 避免冲突[^1] --- #### 🔍 验证与调试 1. **测试文件**:创建 `test.js` 并输入未格式化代码: ```js const test={name:'demo'};function foo(){console.log('unformatted')} ``` 2. 保存文件 (`Ctrl+S`) → 观察自动格式化效果: ```js const test = { name: "demo" }; function foo() { console.log("formatted"); } ``` 3. **状态栏检查**: - 右下角确认已激活 `Prettier` 或 `ESLint` - 点击状态栏切换格式化工具 --- #### ⚠️ 常见问题解决 | 问题 | 解决方案 | |-----------------------|--------------------------------------------------------------------------| | 保存后无变化 | 1. 检查扩展是否激活<br>2. 在代码文件右键 → `格式化文档` → 手动选择工具 | | ESLint 不生效 | 1. 确认项目有 `eslint` 依赖<br>2. 检查 `.eslintrc` 配置是否正确 | | 语言不支持 | Python 需安装 [Python 扩展](https://marketplace.visualstudio.com/items?itemName=ms-python.python) + `autopep8` | | 团队配置同步 | 将 `.vscode/settings.json` 和 `.prettierrc` 提交到 Git 仓库 | > 通过 `Ctrl+Shift+P` → `Preferences: Open Settings (JSON)` 可直接编辑全局配置[^2]。 --- ### 相关问题 1. 如何为 Python 配置保存时自动格式化(如 `black` 或 `autopep8`)? 2. ESLint 和 Prettier 规则冲突时如何优先使用某种规则? 3. 如何在不同项目中自动切换格式化配置? 4. 保存时自动格式化与手动快捷键 (`Shift+Alt+F`) 性能有何差异? 5. 如何通过 VS Code 插件实现 Git 提交前的自动格式化? > 配置完成后,VS Code 会在每次保存时自动调用格式化工具,确保代码风格统一[^1][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值