This is a run-through of how I set up my JavaScript environment for Vanilla, React and Node. Now I am no developer as the title of this website states. This set-up works for me and does what I need it to do, I don't use any style guide although I would like to use the AirBnb one, my JS skills just aren't up to refactoring to its needs yet.

1.

First let us install node via homebrew. I generally use homebrew to install most packages on my Mac.

brew install node

This will install node here /opt/homebrew/lib if you install any global packages they will live in this directory.

2.

I use VSC as my editor of choice, there are two extensions that I use Prettier and ESLint these will keep my JS looking pretty and lint any formatting errors.

Then I install the two packages via npm globally. I install them globally as I can use the same setup throughout all my projects, as I am not working in a team I can set my own styling and formatting.

npm i -g prettier eslint

3.

Now it's time to get under the hood of VSC. I have my own .eslintrc.json setup in my dotfiles dir. I link VSC to this file, which saves me from creating a new eslint config file each time. In VSC I add the following:

"eslint.options": {
 "overrideConfigFile": "/Users/paul/.eslintrc.json"
},

I then install the eslint-config-prettier which allows ESLint and Prettier to play nice with each other.

npm install --save-dev eslint-config-prettier

This has to be installed locally, I have tested it being installed globally. It never worked, this is slightly annoying as I now have nodes_modules and package.json in my User directory but it is what it is.

Next, add prettier to the extends array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.

{
 "extends": [
 "some-other-config-you-use",
 "prettier"
 ]
}

I have played around with some settings in VSC and these seem to work for me. I get the linting from ESLint and then Prettier fixes it for me. There were some YouTube tutorials and online articles that mentioned adding "editor.formatOnSave": false, into JavaScript.

"[javascript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": false,
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
 }
},

I also have the following for ESLint, again not sure if these work but it seems to get things the way I want them.

"eslint.enable": true,
"eslint.run": "onSave",
"eslint.format.enable": true,

That's about it. I have installed a few more ESlint / Prettier plugins such as:

• prettier-plugin-tailwindcss
• eslint-plugin-react

And that's about it. I hope this has helped one of you. If not please let me know on Twitter or if there are anyways of improving this set-up.