2 minute read

Linting with ESLint

Linting a TypeScript project with ESLint can provide several benefits, including:

  • Consistency: ESLint can enforce a consistent code style across your project, making it easier to read and understand.

  • Error prevention: ESLint can catch common mistakes and errors, such as unused variables, before they cause problems in production.

  • Improved code quality: ESLint can help to improve the overall quality of your code by enforcing best practices and encouraging the use of modern JavaScript features.

  • Integration: ESLint can integrate with other tools such as code editors and build systems, making it easy to catch errors and style issues as you work.

  • Customisability: ESLint is highly configurable and allows you to create custom rules specific to your project, this way you can add your own custom rule

VS Code Set up

You need to install a few extensions to make it easier.

  • Prettier

  • ESLint

It’s nice to set Prettier to format documents on save. One caveat is it will format documents for all projects. In my case, I disabled the prettier option if a project doesn’t have prettier configuration.

Linting

To run ESLint on a TypeScript project, you need to do the following:

Install ESLint and the necessary TypeScript parser and plugin by running the command

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Create a file named .eslintrc.cjs in the root of your project and configure it to use the TypeScript parser and plugin by adding the following code:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: '.',
    project: ['./tsconfig.json'],
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    // "airbnb",
    // "airbnb/hooks",
    "prettier"
  ],
};

Run the command npx eslint --ext .ts,.tsx path/to/files to lint your TypeScript files.

You can also add a script in your package.json file to run eslint in your typescript files:

"scripts": {
  "lint": "eslint . && prettier-eslint --list-different **/*.ts",
  "format": "prettier-eslint --write '**/*.ts'"
},

Then you can run the script by typing yarn lint in your command prompt.

Beautifying code with Prettier

Prettier is an open-source code formatting library for JavaScript and describes itself as “an opinionated code formatter. It automatically formats your code according to a consistent style, eliminating the need for developers to manually format their code. Prettier takes the hassle out of maintaining a consistent coding style and makes it easy for teams to collaborate on a project by eliminating discussions about code formatting.

Since we’re using ESLint, we want the prettier-eslint command, which ensures that Prettier formats our code in a consistent manner with our ESLint config. To get that command, install the prettier-eslint-cli package

yarn add -D prettier-eslint-cli

Rules

// **.eslintrc.cjs**
rules: {
  quotes: ['error', 'single', { avoidEscape: true }],
  'comma-dangle': ['error', 'always-multiline'],
  'no-console': 'off',
	'max-len': ["error", { "code": 80 }],
}

How to fix lint errors

error when using async promise function inside useEffect()

Add void to change the return type to void

useEffect(() => {
    void checkUser()
  }, [])

Promise-returning function provided to attribute where a void return was expected.eslint@typescript-eslint/no-misused-promises

Add void in the arrow function

<CommonButton title='SIGN IN' onPress={() => void handleSignIn()} />

response.json() any type error

export type AppUser = {
  companyId: string
  companyName: string
  firstname: string
  lastname: string
  email: string
  gasSafetyNumber?: string
  oftecNumber?: string
}

if (response.status !== statusCodes.OK) {
  return {status: response.status, data: null}
}

return {
  status: response.status,
  data: (await response.json() as {data: AppUser})?.data
}

‘jest’ is not defined

Add jest/globals to env

env: {
  es6: true,
  node: true,
  'jest/globals': true,
},

Comments