Eslint 리액트 타입스크립트(typescript) 적용 방법 예시

Introduction

ESLint is a popular tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. TypeScript is a popular superset of JavaScript that adds static typing and other features to the language. In this blog post, we will discuss the steps to apply ESLint to a React TypeScript project.

Installing Dependencies

First, we need to install the necessary dependencies. We can use npm or yarn for this.

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Configuring ESLint

Next, we need to configure ESLint for TypeScript. We need to create a .eslintrc file in the root of our project directory.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ]
}

Configuring Prettier

Finally, we need to install and configure Prettier to format our code automatically. We can install the necessary Prettier plugins through npm or yarn.

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Next, we need to update our .eslintrc file to include the Prettier configuration.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

Conclusion

In this blog post, we discussed the steps to apply ESLint to a React TypeScript project. By following these steps, we can ensure that our code is consistent, error-free, and easy to maintain. Happy coding!

fredkeemhaus