Vue3框架搭建4：配置说明-eslint配置

原创

已于 2024-07-11 15:37:47 修改 · 645 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架

于 2024-07-11 15:33:46 首次发布

配置说明：

.eslintrc.cjs：

/* eslint-env node */
//node环境，并引入一个模块解析补丁
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = { //继承其他配置
  root: true,  //跟配置文件，ESLint不会在父目录中寻找其他配置文件
  'extends': [
    'plugin:vue/vue3-essential', //使用 Vue 3 的基本规则集
    'eslint:recommended', //使用 ESLint 推荐的核心规则集
    '@vue/eslint-config-typescript', //对 TypeScript 的支持
    '@vue/eslint-config-prettier/skip-formatting'// Vue 的 Prettier 配置，但跳过了格式化规则。所以允许使用 Prettier 进行格式化，不与 ESLint 的规则冲突。
  ],
  /* 
   *指定使用 vue-eslint-parser 来解析 .vue 文件
   *默认情况下，ESLint 使用 Espree 作为其解析器
   *Espree 主要处理标准的 JavaScript 语法
   *它无法正确解析 Vue 单文件组件（.vue 文件）的特殊语法
   *它也不能处理 TypeScript 语法
   *所以，最好设置一下
   */
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest' //ESLint 将支持最新的 ECMAScript 特性
  },
  rules: {
      '@typescript-eslint/prefer-optional-chain': 'off', //关闭使用可选链操作符 (?.) 来替代多层条件检查。  
      'prettier/prettier': ['error', { endOfLine: 'auto' }], //允许 Prettier 自动