Secure-Typescript

Some helpful eslint config in one place

Getting Started

Install the required library

npm install -D -E eslint-config-secure-typescript eslint prettier

Once installed, add an eslint config file to project root

// .eslintrc.js
module.exports = {
  extends: 'secure-typescript',
};

And thats it!

Prerequisites

This config assumes a few things:

1. .prettierrc.js is present in project root
2. tsconfig.json is present in project root
3. path alias is present in tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Applied Rules

Base rules:

• eslint:recommended,
• plugin:@typescript-eslint/strict-type-checked,
• plugin:@typescript-eslint/stylistic-type-checked,
• plugin:prettier/recommended,
• plugin:unicorn/recommended,
• plugin:sonarjs/recommended,
• plugin:security/recommended-legacy,
• plugin:eslint-comments/recommended,

Additional config for React:

• plugin:react/recommended
• plugin:jsx-a11y/recommended
• plugin:react-hooks/recommended

There are a few custom rules that are included in the .eslintrc.js file. Feel free to take a look and override them if needed.

Recommendation

If using vscode, it helps if format and fix on save is enabled. put the following code on .vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Some useful package.json scripts:

Install required deps:

npm install -D -E concurrently

then add the following to package.json scripts:

"lint": "concurrently \"npm run lint:prettier\" \"npm run lint:eslint\" \"npm run lint:type\"",
"lint:fix": "concurrently \"npm run lint:prettier-fix\" \"npm run lint:eslint-fix\"",
"lint:type": "tsc --noEmit",
"lint:eslint": "eslint '{src,test,e2e}/**/*.{ts,tsx}' -c .eslintrc.js",
"lint:eslint-fix": "npm run lint:eslint -- --fix",
"lint:prettier": "prettier '{src,test,e2e}/**/*.{ts,tsx}' --config .prettierrc.js --check",
"lint:prettier-fix": "npm run lint:prettier -- --write",

Changelog

License