Lab 7: The lab I have been asking for ! 
Tags: javascript, webdev, beginners, programming
Published: 2021-11-09 03:08:01

Yes I have been asking for this lab and the reason for it is everytime I come across any Youtube tutorial or a blog post on what is the best set up for Webdev or best extensions to install on VSCode. They always recommended their viewers to install ESLint and Prettier. I got it installed but never have a chance to work on it and esspcially I always got lost reading the docs since I always come in with a mental of having to rush and keep glance through the docs instead of really read and evaluate it. So having a lab to practice a good habit is what I was craving for.

## Setting up Prettier

Prettier is responsible formatting your code. Install instruction have been well [documented](https://prettier.io/docs/en/index.html). When setting up for both Prettier and ESLint, the doc that you will spend most of the time with will be the [options](https://prettier.io/docs/en/options.html) doc for Prettier and 
[rules](https://eslint.org/docs/rules/) for Eslint. After reading thorugh the docs I pick out these option for my project:

```json
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "printWidth": 100
}

```

Prettier did not break my code and also help me properly indent my code uniformly

## Setting up ESLint

For Eslint, I got these rules setting up:

```json
{
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
    "func-names": "off",
    "no-console": "off",
    "prefer-arrow-callback": "warn",
    "no-unused-vars": "warn",
    "no-nested-ternary": "off",
    "no-empty": "off",
    "no-unused-expressions": ["error", { "allowTernary": true }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "ts": "never"
      }
    ]
  }
}

```
The first time when I run ESLint for my project it came up with 48 problems. Fortunately, 
> ESLint comes with several built-in formatters to control the appearance of the linting results

So I use the `--fix` option to let ESLint atomatically fix the most of it. For the `import/unresolved packge` I was lucky to file the original [issue](https://github.com/import-js/eslint-plugin-import/issues/1558) filed on `eslint-plugin-import` to fix it. There was one bug in my code where I have `no-unused-expressions`

```typescript
path.extname(input) === '.md'
    ? fs.writeFileSync(`${outputDir}/${path.basename(input, '.md')}.html`, markup, { flag: 'w' })
    : fs.writeFileSync(`${outputDir}/${path.basename(input, '.txt')}.html`, markup, { flag: 'w' });
``` 
and this time the [doc](https://eslint.org/docs/rules/no-unused-expressions#disallow-unused-expressions-no-unused-expressions) show it power where I come in my `.eslintrc.json` and adding `    no-unused-expressions": ["error", { "allowTernary": true }]` so as to be able to solve the problem.

## Trying to set up pre commit hook
I try to set up the pre commit hook as well as I was so fancy about what Telescope did to their project where they run linter and formatter whenever their contributors want to commit their changes:

1.Setting up Husky and Pretty-quick

`npm install -D husky pretty-quick`

2. Then add a script to run pretty-quick for `staged` files

```javascript
{
    scripts: {
         ...
        "prepare": "husky install"
         ...
    },
   "husky": {
        "hooks": {
          "pre-commit": "pretty-quick --staged"
   }
}
```