介绍
Prettier将你写的代码转换成AST,然后在一个,好, _prettier_格式中打印AST。它的目标是自动化格式化代码的工作,使其超易读。虽然它被React和更大的JavaScript(甚至是CSS!)生态系统迅速采用,Vue用户最初因为缺乏对单文件组件(vue文件)的支持而处于黑暗中。
在本文中,您将学习如何使用 Prettier 和 ESLint 与 Vue 项目。
前提条件
要完成本教程,您将需要:
- Node.js 本地安装,您可以按照 如何安装 Node.js 和创建本地开发环境进行操作。 *某些熟悉 设置 Vue.js 项目可能是有益的。
本教程已通过 Node v16.5.0、npm v7.20.0、vue v2.6.11、eslint v6.7.2、prettier v2.3.2、eslint-config-prettier v8.3.0 和eslint-plugin-vue v6.2.2 进行验证。
步骤1 - 设置项目
首先,您将想从 NPM 全球安装prettier,如果您还没有。
1npm install --global [email protected]
然后,使用 @vue/cli与默认配置启动一个新的Vue项目:
1npx @vue/cli create vue-eslint-prettier-example --default
接下来,导航到新项目目录:
1cd vue-eslint-prettier-example
最后,在您的项目中添加slint-prettier集成包:
1npm install --save-dev [email protected] [email protected]
<$>[注]
**注:**您可能会遇到无法解决依赖树错误,原因是@vue/cli安装的eslint版本和这些集成包声明的差异。
此时,您将有一个新的Vue项目,支持ESLint和Prettier。
步骤 2 – 添加 Config
如果您正在使用使用@vue/cli创建的项目,则可以在eslintConfig属性下找到package.json中的 ESLint 配置。
在plugin:vue/essential后,在扩展子属中添加plugin:prettier/recommended以启用 ESLint 中的 Prettier 支持:
1[label package.json]
2{
3 // ...
4 "eslintConfig": {
5 "root": true,
6 "env": {
7 "node": true
8 },
9 "extends": [
10 "plugin:vue/essential",
11 "plugin:prettier/recommended",
12 "eslint:recommended"
13 ],
14 "parserOptions": {
15 "parser": "babel-eslint"
16 },
17 "rules": {}
18 },
19 // ...
20}
否则,如果您正在使用一个已有eslint的项目,然后对.eslintrc.js进行相同的修改(或您正在使用的 ESLint 配置格式):
1[label .eslintrc.js]
2module.exports = {
3 "root": true,
4 "extends": [
5 "plugin:vue/essential",
6 "plugin:prettier/recommended",
7 "eslint:recommended"
8 ],
9}
现在,ESLint已配置为使用默认推荐的Prettier规则。
步骤 3 — 使用 ESLint 与 Prettier
如果您尚未安装eslint或为 Vue 设置,我们有 仅为您提供指南!本指南还展示了如何配置 VSCode 和 Atom 以实时链接 Vue 文件。
安装了eslint并设置了配置,您将能够运行以下命令:
1eslint --fix
这将使用 Prettier 来为您改造和假装您的 JS 和 Vue 文件! 不要再担心、争论或在代码风格上拉头了! 它们将自动强制执行所有使用eslint的人。
结论
在本文中,您了解如何使用 Prettier 和 ESLint 与 Vue 项目。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。