求助：如何在PhpStorm中为Shopware 6配置ESLint与Stylelint

一、核心项目（Storefront/Administration）的ESLint配置 #

你找到的官方配置文件路径是正确的，直接复用即可，核心是解决依赖路径和配置识别问题：

• 先安装依赖：分别进入vendor/shopware/storefront/Resources/app/storefront和vendor/shopware/administration/Resources/app/administration目录，执行npm install安装ESLint及相关依赖，这是解决大部分报错的前提
• PhpStorm配置：打开Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
  • 取消自动配置，手动指定路径：
    • 针对Storefront：ESLint package选择vendor/shopware/storefront/Resources/app/storefront/node_modules/eslint，配置文件选择vendor/shopware/storefront/Resources/app/storefront/eslintrc.js
    • 针对Administration：ESLint package选择vendor/shopware/administration/Resources/app/administration/node_modules/eslint，配置文件选择vendor/shopware/administration/Resources/app/administration/.eslintrc.js
  • 勾选Run eslint --fix on save，开启保存自动修复功能

二、Stylelint配置步骤 #

Shopware的Stylelint配置逻辑和ESLint一致，同样基于官方目录下的配置文件：

• 先在对应app目录执行npm install安装Stylelint依赖
• 打开PhpStorm的Settings > Languages & Frameworks > Stylesheets > Stylelint，勾选Enable
  • Storefront：指定Stylelint package为vendor/shopware/storefront/Resources/app/storefront/node_modules/stylelint，配置文件选择vendor/shopware/storefront/Resources/app/storefront/.stylelintrc
  • Administration：指定Stylelint package为vendor/shopware/administration/Resources/app/administration/node_modules/stylelint，配置文件选择vendor/shopware/administration/Resources/app/administration/.stylelintrc

三、自定义插件的校验规则复用 #

不管是Admin还是Storefront插件，直接继承官方规则即可，无需重复编写整套规则：

Administration插件 #

1. 在插件的src/Resources/app/administration目录下创建.eslintrc.js和.stylelintrc文件
2. ESLint配置（注意相对路径需根据插件目录层级调整）：

module.exports = {
  extends: '../../../../../../vendor/shopware/administration/Resources/app/administration/.eslintrc.js',
  // 可在此添加自定义规则，覆盖官方规则
  rules: {
    // 示例：关闭console.log校验
    'no-console': 'off'
  }
};

3. Stylelint配置：

{
  "extends": "../../../../../../vendor/shopware/administration/Resources/app/administration/.stylelintrc",
  "rules": {
    // 自定义规则
  }
}

4. 插件依赖处理：在插件的administration目录执行npm init -y初始化package.json，复制官方Administration目录下package.json的devDependencies到插件的package.json中，再执行npm install

Storefront插件 #

1. 在插件的src/Resources/app/storefront目录下创建eslintrc.js和.stylelintrc文件
2. ESLint配置：

module.exports = {
  extends: '../../../../../../vendor/shopware/storefront/Resources/app/storefront/eslintrc.js',
  rules: {
    // 自定义规则
  }
};

3. Stylelint配置：

{
  "extends": "../../../../../../vendor/shopware/storefront/Resources/app/storefront/.stylelintrc",
  "rules": {
    // 自定义规则
  }
}

4. 同样在storefront目录执行npm init -y并安装依赖

四、常见报错排查 #

• 找不到模块：检查对应目录的node_modules是否安装成功，PhpStorm中指定的package路径是否正确
• 校验不生效：确认PhpStorm已开启对应工具的自动校验，Vue/JS等文件类型被正确识别
• 规则不生效：检查配置文件的继承相对路径，确保准确指向vendor中的官方配置文件

内容的提问来源于stack exchange，提问作者David Strauch