Configuration d'ESLint avec Prettier, TypeScript, Vue.js et VSCode Autosave Autoformat

Ce guide vous guidera dans la configuration d'un projet Vue.js avec ESLint 9.13.0, Prettier et TypeScript, pour activer le formatage automatique du code et le peluchage lors de l'enregistrement dans Visual Studio Code.

1. Créez un nouveau projet Vue

Commencez par créer un nouveau projet Vue :

npm create vue@latest

Naviguez dans le répertoire du projet :

cd your-project-directory

2. Installer et mettre à jour les dépendances

Installer les dépendances du projet :

npm install

Ensuite, utilisez ncu (Node Check Updates) pour mettre à jour les dépendances du projet :

npx ncu -u
npm install

3. Conditions préalables Ajouter les packages ESLint, Prettier et TypeScript

Cette configuration nécessite que les packages NPM suivants soient installés localement ou globalement :

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

Installez les dépendances de développement nécessaires avec pnpm ou npm :

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

4. Initialiser la configuration ESLint

Exécutez la commande suivante pour configurer votre configuration ESLint :

npm init @eslint/config@latest

Lorsque vous y êtes invité, effectuez les sélections suivantes pour configurer ESLint :

• Comment souhaiteriez-vous utiliser ESLint ? : Pour vérifier la syntaxe et trouver des problèmes.
• Quel type de modules votre projet utilise-t-il ? : CommonJS (require/exports).
• Quel framework utilise votre projet ? : Vue.js.
• Votre projet utilise-t-il TypeScript ? : Oui.
• Où s'exécute votre code ? : Navigateur.
• Lorsqu'on vous demande si vous souhaitez installer des dépendances (eslint, globals, @eslint/js, @typescript-eslint, eslint-plugin-vue), choisissez Oui et utilisez npm en tant que gestionnaire de paquets.

5. Ajouter une configuration plate ESLint

Pour garantir qu'ESLint fonctionne avec le nouveau format Flat Config, assurez-vous d'inclure la configuration nécessaire dans votre fichier eslint.config.mjs. Les ajustements peuvent dépendre de votre configuration spécifique.

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. Installez l'extension VSCode pour l'intégration Prettier-ESLint

Pour activer le formatage automatique lors de l'enregistrement avec Prettier et ESLint, installez l'extension Visual Studio Code suivante :

• Prettier ESLint : Téléchargez ici

7. Ajouter des recommandations d'extension

Pour recommander l'extension pour votre projet, ajoutez-la au fichier .vscode/extensions.json :

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

8. Redémarrez VSCode

Après avoir configuré votre projet et installé l'extension, redémarrez Visual Studio Code pour vous assurer que l'enregistrement automatique et le formatage automatique fonctionnent comme prévu.

Résumé

Votre projet devrait maintenant être configuré avec :

• ESLint 9.13.0 avec prise en charge de TypeScript et Vue.js
• Une intégration plus jolie pour un formatage de code cohérent
• Formatage automatique lors de l'enregistrement dans VSCode à l'aide de l'extension Prettier ESLint

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!