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中修復代碼樣式問題，您可以將它們配置為文件觀察器