prettier 与 Intellij Idea 和 NPM 的集成

Posted 2023-03-13

【中文标题】prettier 与 Intellij Idea 和 NPM 的集成

【英文标题】：Integration of prettier with Intellij Idea and 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 中的运行器和文件观察器一起使用

【参考方案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，您可以将它们配置为文件观察程序