vue3 + vite + js 配置Eslint + prettier

发布时间:2024年01月19日
第一步 安装ESlint
 npm i eslint -D 
 或
 pnpm add eslint -D /  pnpm install eslint -D
 或
 yarn add eslint -D
第二步 初始化 Eslint
npx eslint --init

执行 npx eslint --init 控制台会出现以下步骤

1)你想如何使用 ESLint (选择最后一个)
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? …
  To check syntax only (只检查语法)
  To check syntax and find problems (检查语法并发现问题)
? To check syntax, find problems, and enforce code style (检查语法、发现问题并强制执行代码样式)
2)你的项目使用什么类型的模块 (选择最第一个,我所参与 vue 项目几乎都是 ESModule)
? What type of modules does your project use? …
? JavaScript modules (import/export) (JavaScript 模块(导入/导出)CommonJS (require/exports) (CommonJS 模块(导入/导出))
  None of these (这些都不是)
3)您的项目使用哪个框架 ?(选择第二个,因为我使用的是 vue )
? Which framework does your project use? …
  React
? Vue.js
  None of these
4)你的项目使用 TypeScript 吗??否/是?(选择 No,因为我没有使用 TypeScript,视自己情况而定 )
? Does your project use TypeScript? ? No / Yes
5)你的代码在哪里运行 ? (两个都选)
Where does your code run?  (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Browser
?  Node
6)您希望如何为您的项目定义样式? (选择第一个)
? How would you like to define a style for your project? …
? Use a popular style guide (使用流行的风格指南)
Answer questions about your style (回答有关你的风格的问题)
7) 您想遵循哪一种风格指南? (选择第二个 Standard 标准的)
? Which style guide do you want to follow?Airbnb: https://github.com/airbnb/javascript
? Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo
8)你希望你的配置文件是什么格式? (选择第一个)
What format do you want your config file to be in? …
? JavaScript
  YAML
  JSON
9)您现在要安装它们吗 (Yes)
? Would you like to install them now? ? No / Yes
10)您要使用哪个软件包管理器? (选择yarn)
? Which package manager do you want to use? ...
    npm
    yarn
  > pnpm

安装完成后 (在项目根目录会出现.eslintrc.cjs或.eslintrc.js文件)(如果是.eslintrc.js则需要将文件名改为.eslintrc.cjs防止后面可能报错)(文件名的生成规则是根据package.json中type字段属性来的如果是"type": “module” 则生成.eslintrc.cjs,如果不指定或"type":"commonjs"则生成.eslintrc.js)

.eslintrc.cjs文件内容

(具体配置信息会在最后附上)

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'standard',
    'plugin:vue/vue3-essential'
  ],
  overrides: [
    {
      env: {
        node: true
      },
      files: [
        '.eslintrc.{js,cjs}'
      ],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

第三步 安装 vite-plugin-eslint
// 该包是用于配置vite运行的时候自动检测eslint规范,不符合页面会报错
pnpm add vite-plugin-eslint -D 
// 降低eslint-plugin-vue 版本否则会和我们下方ESlint的配置起冲突,(不使用下方的配置则无所谓)
pnpm install eslint-plugin-vue@7.0.0 -D
配置 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import eslint from 'vite-plugin-eslint'

export default defineConfig({
// 增加eslint的配置项,这样在运行时就能检查eslint规范
// eslint() 或
// eslint({
// 	  指定需要检查的文件
//    include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
//   })
  plugins: [vue(), eslint()],
  resolve: {
    // 指定@别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3300,
    cors: true,
    proxy: {}
  },
  build: {
    outDir: path.resolve(__dirname, '../dist')
  }
})

第四步安装 eslint-parser (ESLint解析器)
pnpm add @babel/core -D // 某些代码需要调用 Babel 的 API 进行转码,就要使用@babel/core模块。    
pnpm add -D @babel/eslint-parser -D
第五步 安装prettier (用于规范代码格式)
pnpm add  prettier -D
pnpm add eslint-config-prettier  -D   // eslint兼容的插件
pnpm add eslint-plugin-prettier  -D   // eslint的prettier
第六步配置prettier

在项目根目录创建文件 .prettierrc.cjs

// 以下配置视自己情况而定
module.exports = {
  tabWidth: 2,               // 使用2个空格缩进
  useTabs: false,            // 不使用制表缩进,而使用空格
  semi: false,               // 代码结尾是否加分号
  trailingComma: 'none',     // 代码末尾不需要逗号  参考 https://prettier.io/docs/en/options.html#prose-wrap
  singleQuote: true,         // 是否使用单引号
  printWidth: 120,           // 超过多少字符强制换行
  arrowParens: 'avoid',      // 单个参数的箭头函数不加括号 arg => arg
  bracketSpacing: true,      // 对象大括号内两边是否加空格 { a:0 }
  endOfLine: 'auto',         // 文件换行格式 LF/CRLF 
  quoteProps: 'as-needed',   // 对象的key仅在必要时用引号
  jsxSingleQuote: false,     // jsx不使用单引号,而使用双引号
  jsxBracketSameLine: false, // jsx标签的反尖括号需要换行
  rangeStart: 0,             // 每个文件格式化的范围是文件的全部内容
  rangeEnd: Infinity,        // 结尾
  requirePragma: false,      // 不需要写文件开头的 @prettier
  insertPragma: false,       // 不需要自动在文件开头插入 @prettier
  proseWrap: 'preserve',     // 使用默认的折行标准 参考 https://prettier.io/docs/en/options.html#trailing-commas
  htmlWhitespaceSensitivity: 'css'  // 根据显示样式决定html要不要折行
}
第七步配置配置 .eslintrc.cjs
// 在rules里面简单的一些配置:
// "off" 或 0 - 关闭规则
// "warn" 或 1 - 开启规则,使用警告级别的错误
// "error" 或 2 - 开启规则,使用错误级别的错误
module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",         // 使用推荐的eslint
        'plugin:vue/vue3-recommended', // 使用插件支持vue3
        // 接入 prettier 的规则 
        'plugin:prettier/recommended', 
        'eslint-config-prettier'
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module",
        "ecmaFeatures": {
            "modules": true,
            'jsx': true
        },
        "requireConfigFile": false,
        "parser": '@babel/eslint-parser'
    },
    // eslint-plugin-vue 
    'plugins': [
        'vue',      // 引入vue的插件 vue <==> eslint-plugin-vue 
        'prettier' // 引入规范插件  prettier <==>  eslint-plugin-prettier
    ],
    'globals': {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefaults: 'readonly'
    },
    // 这里时配置规则的,自己看情况配置
    // 这里可以进行自定义规则配置
	// key:规则代号
	 // value:具体的限定方式
	 // "off" or 0 - 关闭规则
	 // "warn" or 1 - 将规则视为一个警告(不会影响退出码),只警告,不会退出程序
	 // "error" or 2 - 将规则视为一个错误 (退出码为1),报错并退出程序
	rules: {
	   // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
	   'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则
	   'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行
	   'vue/multi-word-component-names': 'off', // 自定义组件名称应该由多单词大驼峰命名组成,防止和html标签冲突 --- 关闭
	   'vue/max-attributes-per-line': [
	     2,
	     // 多个特性的元素应该分多行撰写,每个特性一行
	     {
	       singleline: 10,
	       multiline: {
	         max: 1
	       }
	     }
	   ],
	   'vue/name-property-casing': [1, 'PascalCase'], // JS/JSX中的组件名应该始终是帕斯卡命名法
	   'vue/prop-name-casing': [1, 'camelCase'], // 在声明prop的时候,其命名应该始终使用驼峰命名
	   'vue/require-v-for-key': 1, // 给v-for设置键值,与key结合使用,可以高效的更新虚拟DOM
	   'vue/no-use-v-if-with-v-for': [
	     2,
	     {
	       allowUsingIterationVar: false
	     }
	   ],
	   // 不要把 v-if 和 v-for 用在同一个元素上——因为v-for 比 v-if 具有更高的优先级
	   'vue/order-in-components': [
	     1,
	     {
	       // 组件/实例的选项的顺序
	       order: [
	         'el',
	         'name',
	         'parent',
	         'functional',
	         ['delimiters', 'comments'],
	         ['components', 'directives', 'filters'],
	         'extends',
	         'mixins',
	         'inheritAttrs',
	         'model',
	         ['props', 'propsData'],
	         'data',
	         'computed',
	         'watch',
	         'LIFECYCLE_HOOKS',
	         'methods',
	         ['template', 'render'],
	         'renderError'
	       ]
	     }
	   ],
	   // //
	   // /// js.规范 /
	   // /
	   'arrow-spacing': [
	     2,
	     {
	       // 在箭头函数之前/之后需要空格
	       before: true,
	       after: true
	     }
	   ],
	   camelcase: [
	     0,
	     {
	       // 需要驼峰命名
	       properties: 'always'
	     }
	   ],
	   'comma-dangle': [0, 'never'], // 要求或禁止使用尾随逗号;最后一个属性是不需要逗号
	   'comma-spacing': [
	     2,
	     {
	       // 强制逗号旁边的间距: 左右一个空格
	       before: false,
	       after: true
	     }
	   ],
	   'comma-style': [2, 'last'], // 逗号风格
	   'constructor-super': 2, // 构建方法中使用super方法
	   curly: [2, 'multi-line'],
	   'dot-location': [1, 'property'], // 在dot之前和之后强制换行
	   'eol-last': 2, // 在文件末尾要求或禁止换行
	   eqeqeq: [1, 'always', { null: 'ignore' }], // 是否使用全等
	   indent: [
	     'off',
	     2,
	     {
	       // 强制执行一致的缩进
	       SwitchCase: 1
	     }
	   ],
	   'jsx-quotes': [2, 'prefer-single'], // 强制在JSX文件中一致使用单引号
	   'keyword-spacing': [
	     2,
	     {
	       // 关键字前后强制执行一致的间距
	       before: true,
	       after: true
	     }
	   ],
	   'new-cap': [
	     2,
	     {
	       // 要求构造函数名称以大写字母开头
	       newIsCap: true,
	       capIsNew: false
	     }
	   ],
	   'new-parens': 2, // 调用不带参数的函数时需要括号
	   'no-array-constructor': 2, // 禁止阵列构建器
	   'no-class-assign': 2, // 禁止修改类声明的变量
	   'no-cond-assign': 2, // 在条件语句中禁止赋值运算符
	   'no-const-assign': 2, // 禁止修改使用const声明的变量
	   'no-control-regex': 0, // 禁止正则表达式中的控制字符
	   'no-delete-var': 2, // 禁止删除变量
	   'no-dupe-args': 2, // 在函数定义中禁止重复参数
	   'no-dupe-class-members': 2, // 禁止在类成员中重复名称
	   'no-dupe-keys': 2, // 禁止对象重复声明属性
	   'no-duplicate-case': 2, // 规则禁止重复案例标签
	   'no-empty-character-class': 2, // 禁止在正则表达式中使用空字符类
	   'no-empty-pattern': 2, // 不允许空的解构模式
	   'no-eval': 2, // 禁止使用eval()
	   'no-ex-assign': 2, // 禁止在catch子句中重新分配异常
	   'no-extend-native': 2, // 禁止扩展原生对象
	   'no-extra-bind': 2, // 禁止不必要的功能绑定
	   'no-extra-boolean-cast': 2, // 禁止不必要的布尔类型转换
	   'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
	   'no-func-assign': 2, // 禁止重新分配函数声明
	   'no-implied-eval': 2,
	   'no-inner-declarations': [2, 'functions'], // 禁止嵌套块中的变量或函数声明
	   'no-invalid-regexp': 2, // 禁止在RegExp中使用无效的正则表达式字符串
	   'no-irregular-whitespace': 2, // 不允许不规则的空白
	   'no-iterator': 2, // 禁止迭代器
	   'no-label-var': 2, // 禁止变量名称的标签
	   'no-labels': [
	     2,
	     {
	       allowLoop: false,
	       allowSwitch: false
	     }
	   ],
	   'no-lone-blocks': 2, // 禁止不必要的嵌套块
	   'no-mixed-spaces-and-tabs': 2, // 禁止使用混合空格和制表符进行缩进
	   'no-multi-spaces': 2, // 禁止多个空格
	   'no-multi-str': 2, // 禁止多行字符串
	   'no-multiple-empty-lines': [
	     2,
	     {
	       // 禁止多个空行
	       max: 1
	     }
	   ],
	   'no-native-reassign': 2,
	   'no-negated-in-lhs': 2,
	   'no-new-object': 2,
	   'no-new-require': 2,
	   'no-new-symbol': 2,
	   'no-new-wrappers': 2,
	   'no-obj-calls': 2,
	   'no-octal': 2,
	   'no-octal-escape': 2,
	   'no-path-concat': 2,
	   'no-proto': 2,
	   'no-redeclare': 2,
	   'no-regex-spaces': 2,
	   'no-return-assign': [2, 'except-parens'],
	   'no-self-assign': 2,
	   'no-self-compare': 2,
	   'no-sequences': 2,
	   'no-shadow-restricted-names': 2,
	   'no-spaced-func': 2,
	   'no-sparse-arrays': 2,
	   'no-this-before-super': 2,
	   'no-throw-literal': 2,
	   'no-trailing-spaces': 2,
	   'no-undef': 0,
	   'no-undef-init': 2,
	   'no-unexpected-multiline': 2,
	   'no-unmodified-loop-condition': 2, // 禁止未修改的循环条件
	   'no-unneeded-ternary': [
	     2,
	     {
	       // 当存在更简单的替代方案时,不允许三元运算符
	       defaultAssignment: false
	     }
	   ],
	   'no-unreachable': 2, // 返回,抛出,继续和中断语句后禁止无法访问的代码
	   'no-unsafe-finally': 2, // 禁止finally块中的控制流语句
	   'no-unused-vars': [
	     1,
	     {
	       // 禁止使用未声明的变量
	       vars: 'all',
	       args: 'none'
	     }
	   ],
	   'no-useless-call': 2, // 禁止不必要的call()和apply()方法
	   'no-useless-computed-key': 2, // 禁止在对象上使用不必要的计算属性键
	   'no-useless-constructor': 2, // 禁止不必要的构造方法
	   'no-useless-escape': 0, // 禁止不必要的转义用法
	   'no-whitespace-before-property': 2, // 在属性之前禁止空格
	   'no-with': 2,
	   'linebreak-style': [0, 'error', 'windows'],
	   'one-var': [
	     2,
	     {
	       initialized: 'never'
	     }
	   ],
	   'operator-linebreak': [
	     2,
	     'after',
	     {
	       // 为维护强制执行一致的换行方式
	       overrides: {
	         '?': 'before',
	         ':': 'before'
	       }
	     }
	   ],
	   'padded-blocks': [2, 'never'], // 在块内要求或禁止填充
	   quotes: [
	     2,
	     'single',
	     {
	       avoidEscape: true,
	       allowTemplateLiterals: true
	     }
	   ],
	   semi: [2, 'never'],
	   'semi-spacing': [
	     2,
	     {
	       before: false,
	       after: true
	     }
	   ],
	   'space-before-blocks': [2, 'always'], // 不要存在多余的块空间
	   'space-in-parens': [2, 'never'],
	   'space-infix-ops': 2,
	   'space-unary-ops': [
	     2,
	     {
	       words: true,
	       nonwords: false
	     }
	   ],
	   'spaced-comment': [
	     2,
	     'always',
	     {
	       markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
	     }
	   ],
	   'template-curly-spacing': [2, 'never'],
	   'use-isnan': 2,
	   'valid-typeof': 2,
	   'wrap-iife': [2, 'any'],
	   'yield-star-spacing': [2, 'both'],
	   yoda: [2, 'never'],
	   'prefer-const': 1,
	   'object-curly-spacing': [
	     2,
	     'always',
	     {
	       objectsInObjects: false
	     }
	   ],
	   'array-bracket-spacing': [2, 'never'],
	   'prettier/prettier': ['error', { endOfLine: 'auto' }] // 忽略换行格式的检查
	 }
	}
第八步配置VScode

1、安装“ESLint”插件
2、安装“Prettier ESLint”插件

// 配置vscode
// 打开:设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑

// settings.json文件
{
 // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // 每次保存的时候自动格式化 
 "editor.formatOnSave": true,
 // 每次保存的时候将代码按eslint格式进行修复
 "eslint.autoFixOnSave": true,
 // 添加vue支持
 "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
           "language": "vue",
           "autoFix": true
      }
 ],
 // 让prettier使用eslint的代码格式进行校验 
 "prettier.eslintIntegration": true
}

至此Vue3 + Vite + js + ESlint + Prettier就配置完成,此时先不急着运行项目,先把。node_modules包和pnpm-lock.yaml删除掉再重新安装依赖包,防止有些依赖包手动降低或升级版本带来的报错

 pnpm i 
 或
 npm i
 或
 yarn
运行项目就可以看到ESlint 代码提示了
/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
   5:3   warning  Prop 'msg' requires default value to be set                                                                         vue/require-default-prop
   5:14  error    Delete `,`                                                                                                          prettier/prettier
  24:8   error    'href' should be on a new line                                                                                      vue/max-attributes-per-line
  24:62  error    'target' should be on a new line                                                                                    vue/max-attributes-per-line
  24:77  error    Replace `?······>create-vue</a?····>,·the·official·Vue·+·Vite` with `>create-vue</a>,·the·official·Vue·+·Vite?···`  prettier/prettier

? 5 problems (4 errors, 1 warning)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

  Plugin: vite-plugin-eslint
  File: /Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
14:33:36 [vite] Pre-transform error: 
/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
   5:3   warning  Prop 'msg' requires default value to be set                                                                         vue/require-default-prop
   5:14  error    Delete `,`                                                                                                          prettier/prettier
  24:8   error    'href' should be on a new line                                                                                      vue/max-attributes-per-line
  24:62  error    'target' should be on a new line                                                                                    vue/max-attributes-per-line
  24:77  error    Replace `?······>create-vue</a?····>,·the·official·Vue·+·Vite` with `>create-vue</a>,·the·official·Vue·+·Vite?···`  prettier/prettier

? 5 problems (4 errors, 1 warning)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

14:33:37 [vite] warning: 
/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
   5:3   warning  Prop 'msg' requires default value to be set                                                                         vue/require-default-prop
   5:14  error    Delete `,`                                                                                                          prettier/prettier
  24:8   error    'href' should be on a new line                                                                                      vue/max-attributes-per-line
  24:62  error    'target' should be on a new line                                                                                    vue/max-attributes-per-line
  24:77  error    Replace `?······>create-vue</a?····>,·the·official·Vue·+·Vite` with `>create-vue</a>,·the·official·Vue·+·Vite?···`  prettier/prettier

? 5 problems (4 errors, 1 warning)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

  Plugin: vite-plugin-eslint
  File: /Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
14:33:37 [vite] Internal server error: 
/Users/lizhengzheng/Desktop/vue3_vite_js_eslint_prettier/src/components/HelloWorld.vue
   5:3   warning  Prop 'msg' requires default value to be set                                                                         vue/require-default-prop
   5:14  error    Delete `,`                                                                                                          prettier/prettier
  24:8   error    'href' should be on a new line                                                                                      vue/max-attributes-per-line
  24:62  error    'target' should be on a new line                                                                                    vue/max-attributes-per-line
  24:77  error    Replace `?······>create-vue</a?····>,·the·official·Vue·+·Vite` with `>create-vue</a>,·the·official·Vue·+·Vite?···`  prettier/prettier
第九步错误解决
 error  Definition for rule 'vue/name-property-casing' was not found
解决方法: 安装  pnpm install eslint-plugin-vue@7.0.0 -D
[vite] Pre-transform error: Failed to load plugin 'vue' declared in '.eslintrc.cjs'
解决方法: 删除node_modules包和pnpm-lock.yaml再重新安装 pnpm i

项目中所有用到的包package.json

{
  "name": "vue3_vite_js_eslint_prettier",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@babel/eslint-parser": "^7.23.3",
    "@vitejs/plugin-vue": "^4.5.2",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^3.2.4",
    "vite": "^5.0.8",
    "vite-plugin-eslint": "^1.8.1"
  }
}

文章来源:https://blog.csdn.net/l_____z______z/article/details/135662456
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。