从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier-Toy模板网

这篇具有很好参考价值的文章主要介绍了从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目git地址，欢迎修改提交，不足地方还请补充批评指正！

项目git地址

简介

ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具，其目标是使代码更加一致并避免错误。

ESLint 是完全插件化的。每条规则都是一个插件，你可以在运行时添加更多。你还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。

先决条件

要使用 ESLint，你必须安装并构建 Node.js（^18.18.0、^20.9.0 或 >=21.1.0）并支持 SSL。（如果你使用的是官方 Node.js 发行版，则始终内置 SSL。）

快速安装

新建一个vue3-vite项目

从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier,vue,前端,前端框架,javascript

npm init @eslint/config

从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier,vue,前端,前端框架,javascript

如果你正在使用 ESLint 8.23.x 和 WebStorm 2022.2.x 或 PhpStorm 2022.2.x。
那么你可能会遇到 TypeError: this.libOptions.parse is not a function。
这是 ESLint 8.23.x 中的一个bug。ESLint 团队正在努力解决这个问题，希望很快就能解决。
在此之前，解决方法是将你的 ESLint 的版本降至8.22。

首先安装依赖

安装在devDependencies里作为开发依赖，后缀加-D

"eslint": "8.22.0",
"eslint-plugin-auto-import": "^0.1.1",
"eslint-plugin-vue": "^9.23.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.2.5",

npm i eslint@8.22.0 -D

后创建 .eslintignore 文件, 排除不必要的格式化目录

build/*.js
src/assets
public
dist
node_modules

.eslintrc.js

语法规则

规则严重性

要更改规则的严重性，请将规则 ID 设置为以下值之一：

"off" 或 0 - 关闭规则
"warn" 或 1 - 打开规则作为警告（不影响退出代码）
"error" 或 2 - 打开规则作为错误（触发时退出代码为 1）

其中如果使用 extends:eslint:recommended ,会使用eslint推荐的规则，就不用手动打开，但会触发error需要关闭就对应规则off

规则参考 https://eslint.nodejs.cn/docs/latest/rules/
.eslintrc.js文件文章来源地址https://www.toymoban.com/news/detail-845729.html

module.exports = {
   
  env: {
   
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended',
    'plugin:vue/vue3-essential',
    'eslint-config-prettier',
    // './.eslintrc-auto-import.json'
  ],
  overrides: [
    {
   
      env: {
   
        node: true,
      },
      files: [
        '.eslintrc.{js,cjs}',
      ],
      parserOptions: {
   
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
   
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    'prettier'
  ],
  rules: {
   
    semi: ['warn', 'never'], // 禁止尾部使用分号
    'no-undef': 'warn', //禁止使用未声明的变量
    'no-unused-vars': 'warn', //禁止未使用的变量
    'linebreak-style': ['off'], // 关闭换行符验证
    'no-