Table Of Contents

• Table Of Contents
  • Packages
  • For Commit Linter
    • Setup File
    • Pre-check Commits With Husky
  • Changelog
    • Scripts
  • Code Formatter && Linter
    • Pre-check Files Format With Husky
  • VSCode Settings
  • Prettier Scripts
  • More

Packages

• commitlint
• @commitlint/config-conventional
• conventional-changelog-cli
• eslint
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• lint-staged
• prettier
• prettier-eslint
• husky

For Commit Linter

• commitlint
• @commitlint/config-conventional

Setup File

echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

Pre-check Commits With Husky

"husky": {
    "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
}

OR

We can add into husky file (.huskyrc)

{
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

Changelog

• conventional-changelog-cli

Scripts

"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"

Code Formatter && Linter

• eslint
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-react
• lint-staged
• prettier
• prettier-eslint

Pre-check Files Format With Husky

• We can add husky tasks into package.json

"husky": {
    "hooks": {
    "pre-commit": "lint-staged"
    }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write",
    "git add
  ],
  "*.js”: [
    “eslint — fix",
    “git add”
  ]
}

OR

• We create our eslint.js and .prettier.js files for configs

.prettier.js

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: "all",
  // Override any other rules you want
};

.eslint.js

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es2021: true,
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 12,
  },
  rules: {},
};

(You can create this file with eslint --init command as well)

• Then we create our lintstage file (.lintstagedrc.json) and write our commands.

{
   "*.js": ["eslint --fix", "prettier --write", "git add"]
}

• Then we write our script into package.json

  "scripts": {
    "pre-commit": "yarn lint-staged"
  },

Then we create our .huskyrc file to run our script(s)

{
  "hooks": {
    "pre-commit": "yarn pre-commit",
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

VSCode Settings

• format the file on save

// .vscode/settings.json

{
  "editor.formatOnSave": true
}

Prettier Scripts

{
  "format": "prettier --write 'src/**/*.{ts,tsx}'",
  "format:check": "prettier -c 'src/**/*.{ts,tsx}'"
}

More

• https://github.com/atolye15/crna-recipe#step-6-setting-up-our-test-environment