@promoboxx/eslint-config v3.4.1
@promoboxx/eslint-config
JS Code styles for Promoboxx. Contrary to the name, it contains more than just eslint (eslint forces a naming convention).
Installation
yarn add --dev eslint prettier @promoboxx/eslint-config
Now add this to your .eslintrc.js
:
module.exports = {
extends: [
// Base config applies to all projects.
'@promoboxx/eslint-config',
// If the project uses prettier:
'@promoboxx/eslint-config/prettier',
// If the project uses jest:
// '@promoboxx/eslint-config/jest',
// If the project uses react:
// '@promoboxx/eslint-config/react',
// If the project uses graphql:
// '@promoboxx/eslint-config/graphql',
],
parserOptions: {
// If the project has a graphql config file you may end up with multiple
// sources of truth for your graphql schema/documents. Either uncomment
// this line, OR add this to your graphql config:
//
// documents: './src/**/*.{graphql,js,ts,jsx,tsx}'
// skipGraphQLConfig: true,
// If the project uses graphql, set the path/url to your schema below.
// Alternatively, you can set this in your graphql config file.
// schema: 'node_modules/@promoboxx/graphql-server-types/graphql.schema.json',
},
}
And this to your prettier.config.js
:
module.exports = require('@promoboxx/eslint-config/prettier.config')
Usage
Normal usage would be adding support for prettier and eslint to your editor, running them after every save.
VS Code
Install the Prettier and eslint extensions.
Add this to your settings:
// Formatting
"editor.formatOnSave": true,
// Prettier
"prettier.requireConfig": true,
// Set default formatter to prettier for languages.
// Note: Expect this to grow as more languages are supported.
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[graphql]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// ESLint
"eslint.format.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"graphql"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
Atom
Install the Prettier and eslint extensions.
In the settings for Prettier, make sure these match:
- Format Files on save
- Only format if a Prettier config is found
In the settings for eslint, make sure these match:
- Fix errors on save
Vim / Neovim
ale supports both prettier and eslint.
Other Editors / Manual
Run these commands after a file is saved:
./node_modules/.bin/eslint --fix "$FILE"
./node_modules/.bin/prettier --write "$FILE"
Notes
There are multiple ways of getting eslint and Prettier working in harmony, and most of them involve using eslint to run Prettier. They work, but Prettier handles much more than just JavaScript, so it's best to use the two tools together, while disabling all eslint rules that Prettier takes care of.
5 months ago
8 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago