搜索

首页  >  问答  >  正文

解决 VS Code 自动格式化 (alt+shift+F) 和 VueJs 默认格式化 (npm run lint) 规则之间的冲突

<p>我刚刚初始化了一个 VueJs 项目:</p> <pre class="brush:php;toolbar:false;">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</pre> <p>但是现在当我格式化我的代码(alt+shift+f)时,prettier 会强调一些东西。如果我运行 <code>npm run lint</code>,事情就会恢复正常。</p> <p>例如,alt-shift-F似乎试图将html元素的第一个属性保留在第一行:</p> <pre class="brush:php;toolbar:false;"><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /></pre> <p>其中 npm run lint 为每个属性都有一个专用行:</p> <pre class="brush:php;toolbar:false;"><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /></pre> <p>这尤其是一个问题,因为文件是在保存时格式化的。</p> <p>我没有强烈的偏好,但如果可能的话我想保留 <code>npm run lint</code> 提出的那个。</p> <p>我的 <code>eslintrc.cjs</code> 包含以下内容:</p> <pre class="brush:php;toolbar:false;">/* 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", }, };</pre> <p>我应该怎么做才能让 <code>alt-shift-f</code> 命令正确格式化我的代码?</p>
P粉539055526P粉539055526466 天前507

全部回复(1)我来回复

  • P粉482108310

    P粉4821083102023-09-03 14:13:37

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

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

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

    回复
    0
  • 取消回复