a workflow to set up ESLint and Prettier in VSCode

ESLint-and-Prettier-Workflow-VSCode.md

Workflow ESLint and Prettier VSCode Updated: feb 2023

Setting up Prettier

1. npm install --save-dev --save-exact prettier in the repo you’re working on so on a per project basis
2. echo {}> .prettierrc.json to create a file that is needed to recognise this repo uses prettier
3. create a .prettierignore file with touch .prettierignore and put files to be ignored in it based on your ESLintignore and/or gitignore file (gitignore would be recommended to copy over)
4. install Prettier extension in VSCode to be able to format using a shortcut or set it up to run on save etc

For more info on setting up a gitignore file: https://www.freecodecamp.org/news/gitignore-file-how-to-ignore-files-and-folders-in-git/

Setting up ESLint

5. run npm init or npm init --yes in the repo/project you’ll be working on. This is to get a package.json file in there if it's not there yet.

the --yes addition to answer the prompts with yes automatically

6. npm init @eslint/config to hit two birds with one stone (intitialize and creating the config file)
7. configure the resulting eslintrc.js file first by the prompts and/or review https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code for prompt decisions and later adjusting of config
8. install the ESLint VSCode extension for visual clues during programming and maybe even configure it to do it's magic on each save automatically, also explained on the above DigitalOcean lesson

Setting up eslint-config-prettier

9. npm install --save-dev eslint-config-prettier in the same repo to make ESLint and Prettier work nicely together without conflict
10. add "prettier" to the "extends" array in your .eslintrc.* file at the end of the file

example:

 "extends": [
        "airbnb-base",
        "prettier"
    ],

11. npx eslint-config-prettier path/to/main.js to see if there are conflicts

Now to manually use prettier for formatting you can use the shortcut shift+alt+f or use the command npx prettier --write <filename>

To see all the errors and warnings for ESLint you can use the command npx eslint <filename> but they're also shown in the VSCode Problems section

12. set up ESLint to automatically fix syntax and formatting issues upon save by following Step 4 and 5 of this article: https://www.digitalocean.com/community/tutorials/linting-and-formatting-with-eslint-in-vs-code