备份下项目中的prettier和eslint配置

prettier和eslint是真的烦,用一次骂一次,最近配置了一个,备份下。

.prettierrc

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "vueIndentScriptAndStyle": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "bracketSpacing": true,
  "trailingComma": "es5",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "never",
  "htmlWhitespaceSensitivity": "strict",
  "endOfLine": "auto",
  "rangeStart": 0
}

.eslintrc.js

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  // parserOptions.parser选项用于配置自定义解析器
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest', // 支持最新语法
    sourceType: 'module', // 支持export、import
  },
  // plugins: ['@typescript-eslint'], // 启用插件
  extends: [
    'plugin:vue/vue3-essential', // vue3规范
    'airbnb-base',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier/skip-formatting',
    'plugin:@typescript-eslint/recommended', // 使用推荐的规则,来自@typescript-eslint/eslint-plugin
    // 'plugin:import/recommended', // 修复eslint(import/no-unresolved)
    'plugin:prettier/recommended',
    './.eslintrc-auto-import.json',
  ],
  rules: {
    indent: ['error', 2, { SwitchCase: 1 }], // 缩进
    'no-console': 0,
    'linebreak-style': 0,
    'no-trailing-spaces': 0,
    'no-tabs': 0,
    'max-len': 0,
    'operator-linebreak': 0,
    'no-mixed-spaces-and-tabs': 0,
    'object-curly-newline': 0, // 对象花括号
    'comma-dangle': 0, // 拖尾逗号
    'import/no-unresolved': 0,
    'guard-for-in': 0,
    'import/no-webpack-loader-syntax': 0,
    'import/prefer-default-export': 0,
    // 检测项目中是否有“外部依赖”(未在package.json 文件中声明的依赖)
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
    'no-restricted-syntax': 0,
    'no-param-reassign': 0,
    'class-methods-use-this': 0,
    'no-continue': 0,
    'no-void': 0,
    'no-return-await': 1,
    'no-empty-function': 0,
    '@typescript-eslint/no-empty-function': 0,
    // 代码规范
    eqeqeq: ['error', 'smart'], // ===
    // 命名规范
    camelcase: 2, // 驼峰
    // // es6语法
    // 解构赋值
    // 'prefer-destructuring': [
    //   'error',
    //   {
    //     array: false,
    //     object: true,
    //   },
    //   {
    //     enforceForRenamedProperties: false,
    //   },
    // ],
    // vue官方校验规则(eslint-plugin-vue)配置
    // vue标签顺序规范
    'vue/attributes-order': [
      'error',
      {
        order: [
          'DEFINITION',
          'LIST_RENDERING',
          'CONDITIONALS',
          'RENDER_MODIFIERS',
          'GLOBAL',
          ['UNIQUE', 'SLOT'],
          'TWO_WAY_BINDING',
          'OTHER_DIRECTIVES',
          'OTHER_ATTR',
          'EVENTS',
          'CONTENT',
        ],
        alphabetical: false,
      },
    ],
    'vue/script-indent': [
      'error',
      2,
      {
        // script标签缩进设置
        baseIndent: 1,
        switchCase: 0,
        ignores: [],
      },
    ],
    'vue/multi-word-component-names': [
      'error',
      {
        // TODO-开发对应页面时重命名
        ignores: ['index', 'Main', 'Navbar', 'Sidebar', 'Breadcrumb'], // 需要忽略的组件名
      },
    ],
    // 标签换行:单行标签不换行,多行标签换行
    'vue/html-closing-bracket-newline': [
      'warn',
      {
        // 单行块配置:never 禁止在开始标签之后和结束标签之前换行
        singleline: 'never',
        // 多行块的配置:always (默认值) 强制要求开始标签之后和结束标签之前必须有换行符
        multiline: 'always',
      },
    ],
    // 禁止在块元素的lang属性中使用未配置的其他语言
    'vue/block-lang': [
      'error',
      {
        script: {
          lang: ['ts'],
        },
        style: {
          lang: ['scss', 'css'],
        },
      },
    ],
    // // vue标签自闭合
    // 'vue/html-self-closing': [
    //   'error',
    //   {
    //     html: {
    //       void: 'always',
    //       normal: 'never',
    //       component: 'any',
    //     },
    //     svg: 'always',
    //     math: 'always',
    //   },
    // ],
    //   // vue 文件每行属性数限制
    //   'vue/max-attributes-per-line': [
    //       'error',
    //       {
    //           singleline: {
    //               max: 3,
    //               allowFirstLine: true,
    //           },
    //           multiline: {
    //               max: 1,
    //               allowFirstLine: false,
    //           },
    //       },
    //   ],
    // 'vue/singleline-html-element-content-newline': [
    //   'error',
    //   {
    //     ignoreWhenNoAttributes: true,
    //     ignoreWhenEmpty: true,
    //     ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
    //   },
    // ],
    // 'vue/attribute-hyphenation': [
    //   'error',
    //   'always' | 'never',
    //   {
    //     ignore: [],
    //   },
    // ],
    // .eslintrc.js: Configuration for rule "vue/attribute-hyphenation" is invalid: Value 0 should be equal to one of the allowed values.
    'import/extensions': [
      'error',
      // 'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        vue: 'never',
      },
    ],
    'no-shadow': 'off',
    '@typescript-eslint/no-shadow': 'off',
  },
  settings: {
    // no-unresolved:确保导入指向可以解析的文件/模块
    'import/resolver': {
      alias: {
        // 将解析到的文件路径重新做个映射,修复eslint别名路径解析问题
        map: [['@', './src']],
        // 需要做解析的文件(后缀)
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      },
    },
  },
  overrides: [
    // 覆盖vue文件的原始缩进配置
    {
      files: ['*.vue'],
      rules: {
        indent: 'off',
      },
    },
  ],
};

.editorconfig

	# https://editorconfig.org

# 已经是顶层配置文件,不必继续向上搜索
root = true

[*]
# 编码字符集
charset = utf-8
# 缩进风格是空格
indent_style = space
# 一个缩进占用两个空格,因没有设置tab_with,一个Tab占用2列
indent_size = 2
# 换行符 lf
end_of_line = lf
# 文件以一个空白行结尾
insert_final_newline = true
# 去除行首的任意空白字符
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

.stylelintignore

	# 排除非css类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json
 
# 排除打包目录以及依赖包目录
/dist/
/node_modules/
  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
对于 PrettierESLint配置,你可以按照以下步骤进行设置: 1. 首先,确保在你的项目已经安装了 PrettierESLint。你可以使用以下命令进行安装: ``` npm install prettier eslint --save-dev ``` 2. 在你的项目根目录下创建一个 `.prettierrc` 文件,并在其定义 Prettier配置选项。比如,你可以指定代码的缩进大小、单引号还是双引号等。以下是一个示例配置文件: ```json { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "avoid" } ``` 3. 接下来,在你的项目根目录下创建一个 `.eslintrc` 文件,并在其定义 ESLint配置选项。你可以基于你的项目需求来选择不同的规则,或者使用一些预设规则。以下是一个示例配置文件: ```json { "extends": ["eslint:recommended", "plugin:prettier/recommended"], "rules": { // 在这里定义你自己的 ESLint 规则 } } ``` 此处我们使用了 `eslint:recommended` 预设规则和 `plugin:prettier/recommended` 插件,后者会自动禁用与 Prettier 冲突的 ESLint 规则。 4. 如果你使用的是 VS Code 编辑器,你可以安装以下插件以实现自动格式化和代码检查: - ESLint 插件:用于在编辑器展示 ESLint 错误和警告,并提供自动修复功能。 - Prettier 插件:用于在保存文件时自动运行 Prettier 进行代码格式化。 完成以上步骤后,你可以根据你的配置选项来自定义代码的格式化和代码质量检查。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liyfn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值