Integration of prettier with Intellij Idea and NPM

Question

What I wanna achieve

1. Intellij - show error via red underline
2. Validate formating via NPM
3. Autoformating via save
4. Override printWidth to 140
5. Integrate with stylelint and tslint and file watcher

What I have done

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 - File Watcher configuration

Intellij Idea - TSlint configuration

Intellij Idea - Typescript configuration

packge.json - stylelint config + runners

What my questions

1. How to add printWidth 140 to all configs?
2. How to share prittier config into tslint and stylelint?
3. How to make it works with runners in package.json and file watcher

Answer 1

How to add printWidth 140 to all configs?

I'd suggest setting it in your .prettierrc

How to share prittier config into tslint and stylelint?

tslint will use your prettier config for linting/autofixes if you configure it accordingly. Same is true for stylelint

How to make it works with runners in package.json and file watcher

not sure I follow you... I'd suggest removing Prettier file watcher and only use tslint and stylelint for formatting your code. You can configure them as file watchers if you like to fix code style issues on Save and/or add npm scripts to your package.json that would run tslint --fix and stylelint --fix commands