Go to Board
JavaScriptTypeScriptlinteslint

eslint + prettier, VS Code에서 저장 후 자동 변경 설정하기(eslint v9.0^)

February 20, 2025

eslint 설치

npm init @eslint/config@latest

config eslint

위의 명령어로 eslint를 설치하게 되면 v9.0 이상으로 설치하게 된다. v9.0 이상에서는 eslintrc.json 이 eslint.config.{js,mjs} 로 대체되어 사용된다. 포맷도 기존과는 다르게 flat 방식을 사용하기 때문에 이전의 버전을 이용하려면 버전 이전 작업(Migration)이 필요하다. 이전 작업은 추후 기회가 되면 다루도록 하겠다.

npm install -D eslint-config-prettier eslint-plugin-prettier

eslint.config.mjs 설정

import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import pluginPrettier from "eslint-plugin-prettier/recommended";
import configPrettier from "eslint-config-prettier";

/ @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["/*.{js,mjs,cjs,ts,jsx,tsx}"] },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  configPrettier,
  pluginPrettier,
];

Visual Studio Code 세팅

Extension 설치

"Ctrl + Shift + X" 혹은 VSC 좌측 [Extensions]에서 eslint 와 prettier 설치하기

install eslint

install prettier

VS code setting.json 설정하기

"Ctrl + Shift + P"를 누르면 vsc 코드

// .vscode settings.json
{
    "editor.codeActionsOnSave": [
        "editor.formatOnSave", "source.fixAll"
    ],
}

레퍼런스

eslint + prettier, VS Code에서 저장 후 자동 변경 설정하기(eslint v9.0^) - ALROCK Blog