开发日志-Prettier的基本使用

最新推荐文章于 2024-09-14 09:50:15 发布

浪里一枝梅

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量114

点赞数 2

分类专栏：开发日志前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40758535/article/details/140914080

版权

开发日志同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

搭配Eslint进行使用

一. 安装

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

二. 配置文件

创建配置文件

.prettierrc

配置内容

{
  "singleQuote": true,
  "tabWidth": 4,
  "semi": true,
  "useTabs": true,
  "trailingComma": "es5",
  "printWidth": 80
}

创建忽略文件

.prettierignore

配置内容

node_modules
dist
build

三. 更新`.eslintrc.config.js` 配置文件

下面是更新后的 .eslintrc.config.js 配置文件，确保与 Prettier 配合使用：

import vuePlugin from 'eslint-plugin-vue';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import eslintPluginPrettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

export default [
    {
        // 全局配置
        languageOptions: {
            ecmaVersion: 'latest',
            sourceType: 'module',
        },
        linterOptions: {
            reportUnusedDisableDirectives: true,
        },
    },
    {
        // TypeScript 文件配置
        files: ['*.ts', '*.tsx'],
        parser: '@typescript-eslint/parser',
        rules: {
            ...typescriptEslint.configs.recommended.rules,
        },
    },
    {
        // Vue 文件配置
        files: ['*.vue'],
        parser: 'vue-eslint-parser',
        rules: {
            ...vuePlugin.configs['vue3-essential'].rules,
        },
    },
    {
        // 自定义规则
        rules: {
            quotes: ['error', 'single'], // 强制使用单引号
            indent: ['error', 4, { SwitchCase: 1 }], // 强制使用4个空格作为缩进
            semi: ['error', 'always'], // 强制使用分号
            'no-console': 'warn', // 警告禁止使用 console
            'vue/html-indent': ['error', 4], // Vue 文件中强制使用4个空格作为缩进
            '@typescript-eslint/no-unused-vars': ['error'], // 禁止 TypeScript 中未使用的变量
            'prettier/prettier': [
                'error',
                {
                    singleQuote: true,
                    tabWidth: 4,
                    useTabs: true,
                    semi: true,
                    trailingComma: 'es5',
                    printWidth: 80,
                },
            ],
        },
    },
    prettierConfig,
    eslintPluginPrettier.configs.recommended,
];