使用 Prettier、TypeScript、Vue.js 和 VSCode 设置 ESLint 自动保存自动格式-js教程-PHP中文网

使用 Prettier、TypeScript、Vue.js 和 VSCode 设置 ESLint 自动保存自动格式

DDD

发布： 2024-11-06 11:34:02

原创

385 人浏览过

Setting Up ESLint with Prettier, TypeScript, Vue.js, and VSCode Autosave Autoformat

本指南将引导您使用 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（Node Check Updates）更新项目依赖项：

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. 安装 VSCode 扩展以进行 Prettier-ESLint 集成

要使用 Prettier 和 ESLint 启用保存时自动格式化，请安装以下 Visual Studio Code 扩展：

Prettier ESLint：在这里下载

7.添加扩展推荐

要为您的项目推荐扩展，请将其添加到 .vscode/extensions.json 文件中：

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

登录后复制

8. 重启VSCode

配置项目并安装扩展后，重新启动 Visual Studio Code 以确保自动保存和自动格式化按预期工作。

概括

您的项目现在应该设置为：

ESLint 9.13.0，支持 TypeScript 和 Vue.js
更漂亮的集成以实现一致的代码格式
使用 Prettier ESLint 扩展在 VSCode 中保存时自动格式化

以上是使用 Prettier、TypeScript、Vue.js 和 VSCode 设置 ESLint 自动保存自动格式的详细内容。更多信息请关注PHP中文网其他相关文章！