@jihyunlab/prettier-config v1.1.3

@jihyunlab/prettier-config

JihyunLab Prettier config.

Setup

1) Setup regular JihyunLab Prettier config

npm i --save-dev @jihyunlab/prettier-config

or

yarn add --dev @jihyunlab/prettier-config prettier@^2.8.4 eslint-config-prettier@^8.6.0 eslint-plugin-prettier@^4.2.1

2) Configure Prettier

.prettierrc.js file structure

.
├── .prettierrc.js
└── ...

Within your .prettierrc.js file:

+ module.exports = {
+   ...require('@jihyunlab/prettier-config')
+ };

Example .prettierrc.js file:

module.exports = {
  ...require('@jihyunlab/prettier-config'),
  printWidth: 120, // your additional prettier configs
};

Restart the editor after changing the prettier config.

3) Conflict handling with ESLint and setting Prettier error display in ESLint

Delete Prettier related configs in ESLint.

Within your .eslintrc.json file:

"extends": [
  "@jihyunlab/eslint-config",
+ "prettier"
]

Setting Prettier error display in ESLint.

Within your .eslintrc.json file:

"plugins": [
+ "prettier"
],
"rules": {
+ "prettier/prettier": "error"
}

Example .eslintrc.json file:

{
  "extends": [
    "@jihyunlab/eslint-config", // your eslint extends
    "prettier"
  ],
  "plugins": [
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

Additional settings

Additional settings file structure

.
├── .vscode                   # Visual Studio Code
│   ├── extensions.json
│   ├── settings.json
├── .editorconfig             # EditorConfig
├── .prettierignore           # Ignore file(Prettier)
└── ...

Additional configuration files can be found on the git page.

https://github.com/jihyunlab/prettier-config

1) Ignore file

Example .prettierignore file:

/node_modules
/build
/dist

2) EditorConfig

Example .editorconfig file:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

3) Visual Studio Code

Within your .vscode/extensions.json file:

{
  "recommendations": [
+   "esbenp.prettier-vscode",
+   "editorconfig.editorconfig"
  ]
}

Within your .vscode/settings.json file:

{
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "editor.formatOnSave": true
}

JihyunLab Prettier configs

{                                       # Prettier Default
  "printWidth": 120,                    # 80
  "tabWidth": 2,                        # 2
  "useTabs": false,                     # false
  "semi": true,                         # true
  "singleQuote": true,                  # false
  "quoteProps": "as-needed",            # "as-needed"
  "jsxSingleQuote": false,              # false
  "trailingComma": "es5",               # "es5"
  "bracketSpacing": true,               # true
  "bracketSameLine": false,             # false
  "arrowParens": "always",              # "always"
  "proseWrap": "preserve",              # "preserve"
  "htmlWhitespaceSensitivity": "css",   # "css"
  "endOfLine": "auto",                  # "lf"
  "singleAttributePerLine": false       # false
}

Troubleshooting

1) When a peer dependencies package is not installed

npm i --save-dev prettier@^2.8.4 eslint-config-prettier@^8.6.0 eslint-plugin-prettier@^4.2.1

Credits

Authored and maintained by JihyunLab <info@jihyunlab.com>

License

Open source licensed as MIT.