ESLint and Prettier config
-
First, install the package along with it’s peer dependencies:
npx install-peerdeps --dev @verkstedt/eslint-config-verkstedt@latest
… or if you use yarn
npx install-peerdeps --yarn --dev @verkstedt/eslint-config-verkstedt@latest
-
Then:
-
If your project uses TypeScript:
npm install --save-dev "typescript@^5.4.3" "@typescript-eslint/eslint-plugin@^7.3.1" "@typescript-eslint/parser@^7.3.1"
… or if you use yarn
yarn add --dev "typescript@^5.4.3" "@typescript-eslint/eslint-plugin@^7.3.1" "@typescript-eslint/parser@^7.3.1"
-
If your project does not use TypeScript, but uses Babel:
npm install --save-dev "@babel/core@^7.24.3" "@babel/eslint-parser@^7.24.1"
… or if you use yarn
yarn add --dev "@babel/core@^7.24.3" "@babel/eslint-parser@^7.24.1"
-
-
In your EsLint config use one of those for
extends
:↓ use this \ if your project uses → Babel TypeScript React Next.js @verkstedt/verkstedt/typescript-react
1☑ /✖️ ☑ ☑ ✖️ @verkstedt/verkstedt/typescript-next
☑ /✖️ ☑ ☑ ☑ @verkstedt/verkstedt/typescript
☑ /✖️ ☑ ✖️ ✖️ @verkstedt/verkstedt/next
☑ /✖️ ✖️ ☑ ☑ @verkstedt/verkstedt/react
☑ ✖️ ☑ ✖️ @verkstedt/verkstedt/babel
☑ ✖️ ✖️ ✖️ @verkstedt/verkstedt/vanilla
✖️ ✖️ ✖️ ✖️ E.g. make your
.eslintrc.cjs
the following:module.exports = { extends: ['@verkstedt/verkstedt/typescript-next'], }
-
Add the following
.prettierrc.json
:"@verkstedt/eslint-config-verkstedt/prettier-config"
You probably also want
.prettierignore
with something like:/.next/ /node_modules/
If you have any generated files (e.g. lingui locales), also add them in there.
-
Add the following to
stylelint.config.cjs
:module.exports = require('@verkstedt/eslint-config-verkstedt/stylelint-config')
Use the same commands as in previous section.
After upgrading, review if all of your projects EsLint rule overwrites are still needed.
We recommend to use CoC with coc-eslint
extension.
To get this working with VS Code, you will first need to install the Prettier - Code formatter extension.
Next, add the following values to global settings, or to to your per project folder settings (./.vscode/settings.json
):
// probably best to use these only in workspace or
// folder config, and not in global settings:
"prettier.useEditorConfig": false,
"eslint.format.enable": true,
// Per language settings:
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
-
dependencies
— the usual -
peerDependencies
— stuff that needs to be installed as a direct dependency of a project using this config. These are packages that provide binaries (eslint
,prettier
,stylelint
) as well as some weird packages that don’t work as regular dependency cougheslint-plugin-prettier
cough). -
devDependencies
— stuff required to runnpm run lint
in this repository. It’speerDependencies
andoptionalDependencies
merged together
-
@verkstedt/verkstedt/typescript-react
is also aliased as@verkstedt/verkstedt
. ↩