prettier 与 Intellij Idea 和 NPM 的集成

Question

我想要达到的目标

1. Intellij - 通过红色下划线显示错误
2. 通过 NPM 验证格式
3. 通过保存自动格式化
4. 将 printWidth 覆盖为 140
5. 与 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 配置 + 跑步者

我的问题

1. 如何将 printWidth 140 添加到所有配置？
2. 如何将更漂亮的配置共享到 tslint 和 stylelint？
3. 如何使它与 package.json 中的 runners 和文件观察器一起使用

Answer 1

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

我建议在你的.prettierrc 中设置它

如何将更漂亮的配置共享到 tslint 和 stylelint？

如果您进行了相应的配置， tslint 将使用您更漂亮的配置进行 linting/自动修复。 stylelint也是如此

如何使它与 package.json 中的 runners 和文件观察器一起使用

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