Prettier, TypeScript, Vue.js 및 VSCode 자동 저장 자동 형식을 사용하여 ESLint 설정

이 가이드에서는 ESLint 9.13.0, Prettier 및 TypeScript를 사용하여 Vue.js 프로젝트를 구성하여 Visual Studio Code에서 저장 시 자동 코드 서식 지정 및 Linting을 활성화하는 과정을 안내합니다.

1. 새로운 Vue 프로젝트 생성

새 Vue 프로젝트 생성으로 시작하세요.

npm create vue@latest

프로젝트 디렉토리로 이동하세요:

cd your-project-directory

2. 종속성 설치 및 업데이트

프로젝트 종속성을 설치합니다.

npm install

그런 다음 ncu(노드 확인 업데이트)를 사용하여 프로젝트 종속성을 업데이트합니다.

npx ncu -u
npm install

3. 전제 조건 ESLint, Prettier 및 TypeScript 패키지 추가

이 구성을 사용하려면 다음 NPM 패키지를 로컬 또는 글로벌로 설치해야 합니다.

prettier
eslint prettier-eslint
@typescript-eslint/parser
typescript 
vue-eslint-parser
@vue/eslint-config-typescript 
@vue/eslint-config-prettier

pnpm 또는 npm을 사용하여 필요한 개발 종속성을 설치합니다.

pnpm install -D prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier

4. ESLint 구성 초기화

다음 명령을 실행하여 ESLint 구성을 설정하세요.

npm init @eslint/config@latest

메시지가 표시되면 다음을 선택하여 ESLint를 구성합니다.

• ESLint를 어떻게 사용하시겠습니까?: 구문을 확인하고 문제를 찾으려면.
• 프로젝트에서 어떤 유형의 모듈을 사용합니까?: CommonJS(요구/내보내기).
• 당신의 프로젝트는 어떤 프레임워크를 사용하나요?: Vue.js.
• 귀하의 프로젝트에서 TypeScript를 사용합니까?: 예.
• 코드는 어디에서 실행되나요?: 브라우저
• 종속성(eslint, globals, @eslint/js, @typescript-eslint, eslint-plugin-vue)을 설치할지 묻는 메시지가 나타나면 예를 선택하고 npm 패키지 관리자입니다.

5. ESLint 플랫 구성 추가

ESLint가 새로운 Flat Config 형식과 작동하도록 하려면 eslint.config.mjs 파일에 필요한 구성을 포함해야 합니다. 이에 대한 조정은 특정 설정에 따라 달라질 수 있습니다.

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier/recommended';
import vueConfigTypescript from '@vue/eslint-config-typescript';
import vueConfigPrettier from '@vue/eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  // js
  pluginJs.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'off',
      'no-undef': 'off',
    },
  },
  // ts
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  // vue
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser,
      },
    },
  },
  {
    rules: {
      ...vueConfigTypescript.rules,
      ...vueConfigPrettier.rules,
      'prettier/prettier': [
        'warn',
        {
          singleQuote: true,
        },
      ],
      'vue/multi-word-component-names': 'off',
      'vue/attribute-hyphenation': 'off',
      'vue/no-v-html': 'off',
      'vue/v-on-event-hyphenation': 'off',
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/no-require-imports': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
  {
    ignores: ['node_modules', '.nuxt', '.output', 'dist'],
  },
  // prettier
  prettier,
  {
    rules: {
      'prettier/prettier': ['warn', { singleQuote: true }],
    },
  },
];

6. Prettier-ESLint 통합을 위해 VSCode 확장 설치

Prettier 및 ESLint를 사용하여 저장 시 자동 서식 지정을 활성화하려면 다음 Visual Studio Code 확장 프로그램을 설치하세요.

• 더 예쁜 ESLint: 여기에서 다운로드하세요

7. 확장 권장 사항 추가

프로젝트에 확장 기능을 추천하려면 .vscode/extensions.json 파일에 추가하세요.

{
  "recommendations": [
    "rvest.vs-code-prettier-eslint"
  ]
}

8. VSCode를 다시 시작하세요

프로젝트를 구성하고 확장 프로그램을 설치한 후 Visual Studio Code를 다시 시작하여 자동 저장 및 자동 서식이 예상대로 작동하는지 확인하세요.

요약

이제 프로젝트는 다음과 같이 설정되어야 합니다.

• TypeScript 및 Vue.js를 지원하는 ESLint 9.13.0
• 일관적인 코드 형식을 위한 더욱 멋진 통합
• Prettier ESLint 확장을 사용하여 VSCode에 저장할 때 자동 서식 지정

위 내용은 Prettier, TypeScript, Vue.js 및 VSCode 자동 저장 자동 형식을 사용하여 ESLint 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!