The importance of project setup

At every project there is things that can make the developer experience and the code standards way better, the 3 most common tools are

• Prettier
• Eslint
• Editor config

1. Configuring Prettier

npm -i prettier
create .prettierrc

• Add to the file just open curly bracket { } meaning that you want to use just the default mode for prettier

{
  "scripts": {
    […]
    "format": "prettier --ignore-path ./.gitignore --write \"./**/*.{html,json,js,ts,css}\"",
    "format:check": "prettier ./.gitignore --check \"./**/*.{html,json,js,ts,css}\""
  }
}

So we added two commands: one that will fix all of our problems, and one that will check for problems. The former is the one we use before we commit code to reformat everything. The latter we could make run in a CI/CD (continuous integration / continuous delivery) platform like Azure Pipelines, GitHub Actions, Travis CI, etc. to make sure all code is formatted with Prettier before we deploy it. This is what I was talking about "being automated". Now we can make the enforcement of our code style automatic.

Notice the --ignore-path too. Normally we'd make a .prettierignore file with our wanted paths to ignore (we don't want to format nor check files that are machine-generated, just the ones we write ourselves) but our .gitignore is actually the same so it works perfectly and we can use the one file for both purposes.

---

2. Configuring ESLint

npm install -D eslint eslint-plugin-import eslint-config-prettier

• eslint-plugin-import: basic rule if you importing a module that doesnt exists
• eslit-config-prettier: Eslint won't worry about things that can be fixed by prettier
• Create the eslintrc.json
• Example of a good configuration

{
  "extends": ["eslint:recommended", "plugin:import/errors", "prettier"],
  "rules": {
    "no-console": 1
  },
  "plugins": ["import"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

Tips:

• Just warn console logs, to disable should use 0
• By default eslint don't understand the latest version of JS so we need to define that
• Source type: this is the ES6 style type

---

3. Editor config

That will help to config the editor independent of the type of editor you are using

• Add the extension to vscode

.editorconfig

root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_size = 2
indent_style = space