在vue3中浅尝eslint

Web三只猫

已于 2023-11-16 13:01:26 修改

阅读量117

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-16 11:27:15 首次发布

本文链接：https://blog.csdn.net/qq_47497132/article/details/134437519

版权

安装

pnpm install --save-dev eslint eslint-plugin-vue

初始化eslint：
npx eslint --init

然后根据提示选择对应的选项，选择如下：

? 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

To check syntax only: 仅检查语法
这个选项只会让 ESLint 检查您的代码是否符合语法规则，不会执行其他的代码质量检查或风格强制。
To check syntax and find problems: 检查语法并发现问题
选择这个选项后，ESLint 将检查您的代码语法，并查找可能存在的问题，如未定义的变量、未使用的变量等。
To check syntax, find problems, and enforce code style: 检查语法、发现问题并强制代码风格。这是最全面的选项，选择后，ESLint 将不仅检查语法和问题，还会根据您的配置强制执行代码风格规则，确保代码在整体风格上保持一致。

通常，如果希望在项目中使用 ESLint 来保证代码的风格一致性和质量，那么直接选择第三个就好。

接下来会询问您的项目使用什么类型的模块（Module）系统：

? What type of modules does your project use? ...
> JavaScript modules (import/export)
CommonJS (require/exports)
None of these

JavaScript modules (import/export): JavaScript 模块（使用 import 和 export 语法）
如果项目使用了 JavaScript 的模块系统，即使用了 ES6 的 import 和 export 语法来组织和导入导出代码文件，那么选择这个选项。
CommonJS (require/exports): CommonJS 模块（使用 require 和 module.exports 语法）
如果项目使用了 CommonJS 的模块系统，即使用了 require 和module.exports 语法来组织和导入导出代码文件，那么选择这个选项。
None of these: 无
如果项目既不使用 JavaScript 的模块系统，也不使用 CommonJS 的模块系统，可以选择这个选项。

由于我是写Vue项目，这里我就选择第一个。

接下来询问在哪个框架中使用：

? Which framework does your project use? ...
React
> Vue.js
None of these

这里我选择了Vue.js，大家按需选择就好。

接下来会询问你是否使用ts和代码在哪里运行：

√ Does your project use TypeScript? · No / **Yes**
√ Where does your code run? · browser, node

No: 如果项目不使用 TypeScript，选择这个选项。
Yes: 如果项目使用 TypeScript，选择这个选项。
如果项目使用 TypeScript，ESLint 会结合 @typescript-eslint 插件来提供 TypeScript 相关的检查和规则。

Where does your code run?
这个选项用来询问您的代码将在什么环境中运行。您可以选择多个环境，如浏览器、Node.js 等。选择适合您项目的环境类型。例如：

browser: 如果您的代码将在浏览器环境中运行。
node: 如果您的代码将在 Node.js 环境中运行。
根据您的选择，ESLint 将会根据不同的环境提供相应的规则和检查。。

接下来问你希望如何定义项目的样式：

√ How would you like to define a style for your project? …
  Use a popular style guide
❯ Answer questions about your style
  ## next
√ How would you like to define a style for your project? · prompt

Use a popular style guide: 使用一个流行的代码风格指南
如果选择了这个选项，就可以从一些已知的流行代码风格指南中进行选择，例如 Airbnb、Google、Standard 等。这将会自动为应用选定的代码风格指南，以及相关的 ESLint 规则和配置。
Answer questions about your style: 如果选择了这个选项，将会被引导回答一系列问题，用于自定义代码风格配置。这将根据自己的偏好和项目需求，创建一个项目的 ESLint 配置。
next: 继续
如果选择了这个选项，您将会跳过当前步骤，继续下一步的配置。
How would you like to define a style for your project? · prompt
如果选择了这个选项，您将会使用交互式提示来自定义代码风格。这将会引导你回答一些问题，以便为你的项目生成适合的 ESLint 配置

然后询问你想用什么格式的配置文件：

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

询问缩进风格：

? What style of indentation do you use? ...
> Tabs
  Spaces

Tabs: 使用制表符进行缩进
如果你选择了这个选项，你的代码中的缩进将使用制表符进行，每一个级别的缩进都是一个制表符。
Spaces: 使用空格进行缩进
如果你选择了这个选项，你的代码中的缩进将使用空格进行，每一个级别的缩进通常是 2 个或 4个空格，这取决于你的偏好和项目规范。

字符串使用双引号还是单引号：

? What quotes do you use for strings? ...
  Double
> Single

Double: 使用双引号表示字符串
如果你选择了这个选项，你的代码中的字符串将使用双引号包裹，例如 "Hello, World!"。
Single: 使用单引号表示字符串
如果你选择了这个选项，你的代码中的字符串将使用单引号包裹，例如 'Hello, World!'。

用哪种结束符：

? What line endings do you use? ...
> Unix
  Windows

Unix: 使用 Unix 风格的换行符
如果你选择了这个选项，你的代码中的换行符将采用 Unix 风格，即 LF（换行Line Feed）。
Windows: 使用 Windows 风格的换行符
如果你选择了这个选项，你的代码中的换行符将采用 Windows 风格，即 CRLF（回车换行 Carriage Return Line Feed）。

是否使用分号：

? Do you require semicolons? » No / Yes

然后会问你是否安装依赖：

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes

这里我们选择Yes，然后会询问你用什么包管理器去安装依赖：

? Which package manager do you want to use? ...
  npm
  yarn
> pnpm

安装完成后我们项目的根目录会生成.eslintrc.js文件：

module.exports = {
	"env": {
		"browser": true,
		"es2021": true
	},
	"extends": [
		"eslint:recommended",
		"plugin:vue/vue3-essential"
	],
	"overrides": [
		{
			"env": {
				"node": true
			},
			"files": [
				".eslintrc.{js,cjs}"
			],
			"parserOptions": {
				"sourceType": "script"
			}
		}
	],
	"parserOptions": {
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"plugins": [
		"vue"
	],
	"rules": {
		"indent": [
			"error",
			"tab"
		],
		"linebreak-style": [
			"error",
			"unix"
		],
		"quotes": [
			"error",
			"double"
		],
		"semi": [
			"error",
			"always"
		]
	}
}

有时候我们希望它可以忽略一些检查，所以我们可以在根目录建立一个.eslintignore文件用来忽略一些检查，这里根据个人需求进行配置即可，我的配置如下：

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
.svn
dist
/public
/docs
.husky
.local
/bin
Dockerfile

配置Prettier

尽管 ESLint 和 Prettier 都具备代码质量和维护性方面的功能，但它们的焦点不同。通过同时使用 ESLint 和 Prettier，可以获得代码质量的全面检查，同时确保代码风格的一致性。通常的做法是将 ESLint 用于检测代码问题和逻辑错误，而 Prettier 则用于自动格式化代码，以便代码在不同人之间保持一致的外观。这样可以最大限度地提高代码质量和可维护性。

安装：

npm add prettier -D

安装完成后，在项目根目录新建.prettierrc.js文件，这里简单列一下常用的，剩下的可以到官网查看

module.exports = {
    printWidth: 100, //一行的字符数
    tabWidth: 4, // 一个tab代表几个空格数
    useTabs: true, //是否使用tab进行缩进
    singleQuote: true, //字符串是否使用单引号
    semi: false, // 行尾是否使用分号，默认为true
    trailingComma: "none", // 是否使用尾逗号
    htmlWhitespaceSensitivity: "strict", // HTML空白敏感度
    bracketSpacing: true, // 对象大括号直接是否有空格，默认为 true，效果：{ a: 1 }
    proseWrap: "never", // 换行设置
}

同时也可以在根目录下建立忽略文件.prettierignore：

/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*

eslint与Prettier相结合

我们可以使用eslint-config-prettier和eslint-plugin-prettier来结合eslint与Prettier。

eslint-config-prettier用来覆盖 ESLint 本身的规则配置，

eslint-plugin-prettier则是用于让 Prettier 来接管eslint --fix即修复代码的能力。

安装：

npm i eslint-config-prettier eslint-plugin-prettier -D

最终代码如下：

module.exports = {
    env: {
        browser: true,
        es2021: true
    },
    extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:prettier/recommended'],
    overrides: [
        {
            env: {
                node: true
            },
            files: ['.eslintrc.{js,cjs}'],
            parserOptions: {
                sourceType: 'script'
            }
        }
    ],
    // 参考vue官方推荐,替换默认parser
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    plugins: ['vue'],
    rules: {
        indent: ['error', 'tab'],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'never']
    }
}

然后在项目的package.json中配置一条命令：

{
    "scripts": {
        "lint:script": "eslint --ext .js,.jsx --fix --quiet ./",
    }
}

该命令于检查和修复代码该命令的作用是在指定的文件扩展名（.js、.jsx）下，运行 ESLint 来检查并尝试修复当前目录及其子目录中的代码问题。命令的目标是自动化代码质量检查和格式修复的过程，以确保代码符合规范和最佳实践。

但还有一个问题就是，目前只会检测.js、.jsx文件，并不会检测.vue文件，这里我们还需要借助一些插件来实现。

支持.vue文件

安装下面插件:

npm install eslint-plugin-vue vue-eslint-parser --save-dev

配置.eslintrc.js，在extends中添加这两个插件，最终配置如下：

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        //新增插件
        'plugin:prettier/recommended',
        'plugin:vue/recommended'
    ],
    overrides: [
        {
            env: {
                node: true
            },
            files: ['.eslintrc.{js,cjs}'],
            parserOptions: {
                sourceType: 'script'
            }
        },
        {
            files: ['*.vue'],
            rules: {
                'no-undef': 'off',
                'vue/no-setup-props-destructure': 'off',
                'vue/multi-word-component-names': 'off',
                'vue/no-mutating-props': 'off',
                'no-unused-vars': 0,
                'vue/valid-attribute-name': 'off'
            }
        }
    ],
    // 参考vue官方推荐,替换默认parser
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    plugins: ['vue'],
    rules: {
        'prettier/prettier': 'error',
        indent: ['error', 'tab'],
        'linebreak-style': ['error', 'unix'],
        quotes: ['error', 'single'],
        semi: ['error', 'never'],
        'no-console': 'off',
        'no-debugger': 'off'
    }
}

然后修改命令为：

"scripts": {
    "lint:script": "eslint --ext .js,.jsx,.vue --fix --quiet ./"
},

运行 pnpm run lint 可以查看问题

运行时实时验证

如果使用vscode编辑器，可以下载ESLint和Prettier-Code formatter进行验证，该插件会检测项目根目录是否存在相关配置文件，如果有相关配置文件则会根据配置文件在保存的时候进行检测，如果不用vscode开发也没关系，可以借助一些插件实现运行时代码保存时候根据规则进行验证。

npm i vite-plugin-prettier

在vite.config.js文件中引入插件文件中引入插件：

import VitePrettier from 'vite-plugin-prettier'
export default defineConfig({
  plugins: [
    VitePrettier({
      singleQuote: true,// 字符串是否使用单引号
      //...更多规则
    })
  ],
})

配置后重启项目，只要项目在运行中，保存代码就会通过prettier进行代码格式化处理。

Web三只猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
在vue3中浅尝eslint

安装初始化eslint：To check syntax only: 仅检查语法这个选项只会让 ESLint 检查您的代码是否符合语法规则，不会执行其他的代码质量检查或风格强制。To check syntax and find problems: 检查语法并发现问题选择这个选项后，ESLint 将检查您的代码语法，并查找可能存在的问题，如未定义的变量、未使用的变量等。
复制链接

扫一扫