OSD600 – LAB 07

Hi There

This time this lab is all about setting configuration files for our SSG project. mine.
The configuration that we should add is:

• Prettier
• Eslint
• Husky
• VSCode

Prettier

To set up prettier I followed its documentation and had to do the following steps:
1.

npm install --save-dev --save-exact prettier

1. Create a prettierrc.json
   Inside it will be configuration

2. Create a .prettierignore
   Inside it will be files to be ignored by prettier

3. Setting the script
   The script will run
   

npx prettier --write .

and format all the files.

ESlint

To set up ESlint I followed its documentation and had to do the following steps:

1.

npm install eslint --save-dev

1. Set up configuration file

npx eslint --init

1. Create a .eslintignore
   Inside it will be files to be ignored by ESlint

2. Setting the script
   The script will run
   

npx eslint .

and do the linting for all the files.

VSCode

For the VSCode I adde a .vscode folder with configuration inside it
Settings.json:

{
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

  "files.eol": "\n",
  "files.insertFinalNewline": true
}

Extensions.json:

  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

Finally

I also tried to implement Husky but could not understand it very well, so I commented out the configuration files to do it later.
Now everyone that work on this project will be able to have same linting and formatting which is very important.
Thank you for reading.