prettier 与 Intellij Idea 和 NPM 的集成答案

【问题标题】：Integration of prettier with Intellij Idea and NPMprettier 与 Intellij Idea 和 NPM 的集成
【发布时间】：2020-03-18 23:29:50
【问题描述】：

我想要实现的目标

Intellij - 通过红色下划线显示错误
通过 NPM 验证格式
通过保存自动格式化
将 printWidth 覆盖为 140
与 stylelint 和 tslint 以及文件观察器集成

我做了什么

stylelint.config.js

const regex = {
  pascal: "[A-Z][a-z]+[a-zA-Z]*",
  camel: "[a-z]+[a-zA-Z]*"
};

const componentElementModifier = `\\.${regex.pascal}(__${regex.camel}(_${regex.camel})?)?`;
const componentModifier = `\\.${regex.pascal}_${regex.camel}`;
const bemMix = `\\.${regex.pascal}__${regex.pascal}`;

module.exports = {
  plugins: ["stylelint-prettier", "stylelint-selector-bem-pattern"],
  extends: ["stylelint-prettier/recommended"],
  rules: {
    "prettier/prettier": true,
    "plugin/selector-bem-pattern": {
      componentName: regex.pascal,
      implicitComponents: true,
      componentSelectors: {
        initial: `^(${componentElementModifier})$|^(${bemMix})$|^(${componentModifier})$`
      }
    }
  }
};

tslint.json

{
  "extends": [
    "tslint:latest",
    "tslint-react",
    "tslint-plugin-prettier",
    "tslint-config-prettier"
  ],
  "rules": {
    "object-literal-sort-keys": false,
    "prettier": true,
    "no-default-export": true
  },
  "linterOptions": {
    "exclude": ["**/*.less.d.ts"]
  }
}

Intellij Idea - 文件观察器配置

Intellij Idea - TSlint 配置

Intellij Idea - Typescript 配置

packge.json - stylelint 配置 + 跑步者

我的问题

如何将 printWidth 140 添加到所有配置中？
如何将 prittier 配置共享到 tslint 和 stylelint？
如何使其与 package.json 中的运行器和文件观察器一起使用

【问题讨论】：

标签： intellij-idea eslint tslint prettier stylelint

【解决方案1】：

如何将 printWidth 140 添加到所有配置中？

我建议将其设置在您的.prettierrc

如何将 prittier 配置共享到 tslint 和 stylelint？

如果您configure it accordingly，tslint 将使用您更漂亮的配置进行 linting/autofixes。 stylelint 也是如此

如何使它与 package.json 中的运行器和文件观察器一起工作

不确定我是否关注您...我建议删除 Prettier 文件观察程序，仅使用 tslint 和 stylelint 来格式化您的代码。如果您想修复 Save 上的代码样式问题和/或将 npm 脚本添加到将运行 tslint --fix 和 stylelint --fix 命令的 package.json，您可以将它们配置为文件观察程序

【讨论】：