Eslint / Prettier Setup for @acm-97
These are my ESLint and Prettier settings for a React.js or Nextjs project.
Table of Contents
What it does
- Lints JavaScript and TypeScript based on the latest standards.
- Fixes issues and formatting errors with Prettier.
- Check for accessibility rules on JSX and TSX elements.
Install
with npm:
npm install --dev @acm-97/eslint-prettier-config
with yarn:
yarn add -D @acm-97/eslint-prettier-config
Note: After installation, if you are only going to work with Javascript files, you can run one of the following commands to remove unnecessary packages and save space:\
npm remove @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript
yarn remove @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript
How to use:
JavaScript projects
// in your "eslintrc.json" file
// add the below json object
{
"extends": [
"@acm-97/eslint-prettier-config"
]
}
// if the above does not work for you, try with this:
{
"extends": [
"./node_modules/@acm-97/eslint-prettier-config"
]
}
// in the "package.json" file
// you can add two scripts to your package.json to lint and/or fix your code:
"scripts": {
"lint": "eslint .",
"lint:fix": "npm run lint -- --fix",
},
TypeScript projects
// in your "eslintrc.json" file
// add the below json object
{
"extends": [
"@acm-97/eslint-prettier-config/typescript.js"
]
}
// if the above does not work for you, try with this:
{
"extends": [
"./node_modules/@acm-97/eslint-prettier-config/typescript.js"
]
}
// in the "package.json" file
// you can add two scripts to your package.json to lint and/or fix your code:
"scripts": {
"lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
"lint:fix": "npm run lint -- --fix",
Add support for Next.JS
First do: yarn add -D eslint-config-next
or npm install --dev eslint-config-next
and then:
// update your "eslintrc.json" file
{
"extends": [
...
'next/core-web-vitals',
]
}
With VS Code
Once you have done. You probably want your editor to lint and fix for you.
Note: If eslint configuration does not work you may have to restore uor VS Code.
- Install the ESLint package
- Now we need to setup some VS Code settings. Go to the
settings.json
file. Then, add this little config and then:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}