Eslint / Prettier Setup for @acm-97

These are my ESLint and Prettier settings for a React.js or Nextjs project.

Table of Contents

• Eslint / Prettier Setup for @acm-97
  • Table of Contents
  • What it does
  • Install
  • How to use:
    • JavaScript projects
    • TypeScript projects
    • Add support for Next.JS
  • With VS Code

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.

1. Install the ESLint package
2. 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
  }
}