解决 VS Code 自动格式化 (alt+shift+F) 和 VueJs 默认格式化 (npm run lint) 规则之间的冲突
P粉539055526
P粉539055526 2023-09-02 17:11:25
[Vue.js讨论组]

我刚刚初始化了一个 VueJs 项目:

npm init vue@3 .
Need to install the following packages:
  create-vue@3.3.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ Package name: ... no-interrupts
√ Add TypeScript? ... Yes
√ Add JSX Support? ... Yes
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... No 
√ Add Cypress for both Unit and End-to-End testing? ... No 
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

但是现在当我格式化我的代码(alt+shift+f)时,prettier 会强调一些东西。如果我运行 npm run lint,事情就会恢复正常。

例如,alt-shift-F似乎试图将html元素的第一个属性保留在第一行:

<img alt="Vue logo"
     class="logo"
     src="@/assets/logo.svg"
     width="125"
     height="125" />

其中 npm run lint 为每个属性都有一个专用行:

<img
  alt="Vue logo"
  class="logo"
  src="@/assets/logo.svg"
  width="125"
  height="125"
/>

这尤其是一个问题,因为文件是在保存时格式化的。

我没有强烈的偏好,但如果可能的话我想保留 npm run lint 提出的那个。

我的 eslintrc.cjs 包含以下内容:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
};

我应该怎么做才能让 alt-shift-f 命令正确格式化我的代码?

P粉539055526
P粉539055526

全部回复(1)
P粉482108310

您需要在 VS Code 中设置默认格式化程序。操作方法如下:

  1. 安装ESLint扩展
  2. 转到设置并搜索“默认格式化程序”
  3. 选择 ESLint

VS Code 然后会自动从项目中读取 ESLint 配置并相应地格式化代码

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号