nuxt3+vite+vue3如何使用eslint和prettier

2023-08-18 15:57:18

nuxt3+vite+vue3+eslint_prettier+tailwindcss大家主要参考链接 令人愉快的 Nuxt3 教程 (一): 应用的创建与配置

其他比较完整的教程可参考  vite+vue3如何配置ESLint与prettier?

其中遇到的问题以及解决方案在文章最后

前言

笔者从 Nuxt2.x 开始接触这个框架,当年的选型,也主要因为它提供了开箱即用的 vue SSR 方案。当然,项目开始这一路走来,遇到的坑非常的多。不过相对于的技术收获也是很大的,因为我们不得不在这趟旅程中,接触许多平常未曾涉及的知识体系,这些对我们前端开发而言,大有裨益。

接下来,笔者也将用通俗易懂的文字和图片,带你进入 Nuxt3 的世界。

Nuxt 是什么?

nuxt 对于 vue 就如同 next 对于 react。它们产生的原因,主要是因为像 vue,react 它们都只是视图层的框架。然而前端应用,从代码编写到最终的真正上线,还要经过一系列流水线师的构建步骤。

比如在 webpack 中一个 .vue 文件就要经过 vue-loader/plugin 分发 js 到 ts-loader,babel-loader 等等进行处理,里面的 scss 也要经过 sass-loader,postcss-loader,css-loader,style-loader,mini-css-extract-plugin/loader 等等的依次处理,才能变成真正在浏览器中,运行的代码。

假如这些都让开发者来进行配置,显然增加了许多的学习成本。大部分开发者,压根就不想为了构建一个应用去学习这么多知识,还要付出大量的试错成本,我们更多的想法是: 今天早点下班。老板也不想给我们这种"无产出"时间来白白浪费工资,他只想守在我们身旁,问我们:"今天能不能上线?今晚能不能上线?"。所以像 next, nuxt 这些框架解决方案就顺势而出了,它们的目标就是提供构建视图框架应用,开箱即用的解决方案。这个解决方案不止包括 SSR,还包括 SPA 和 SSG 等等模式。

接下来让我们一起快速构建一个 Nuxt3 应用吧。

创建 Nuxt3 应用

官方参考文档

和各种脚手架一样,初始化项目只需执行下列命令:

# npx npx nuxi init nuxt-app # pnpm pnpm dlx nuxi init nuxt-app

当然,在墙内的同学,应该都会由于网络原因而失败,这里我给出了模板仓库链接,可以去下方直接下载。

https://github.com/nuxt/starter



Image



到这个仓库页面,然后切换到 v3 相应的分支,点击右上方的 Code ,把模板下载到本地解压即可。

此时我们就拥有了一个最小化的 Nuxt3 应用,目录结构见下方:



Image



然后安装好 npm 包之后,执行 npm run dev 即可启动。默认的 NuxtWelcome 页面如图所示。



Image



这样一个Nuxt3应用就创建完成了,我们就能够开始进行页面开发工作了。

你需要的亿点点配置

有道是,工欲善其事必先利其器,开发 Nuxt3 之前,良好的配置往往能让我们事半功倍。

刚刚的最小化 Nuxt3 应用中,依赖的只有 "nuxt": "3.0.0-rc.4",这显然是远远无法满足我们的日常开发需求的。

在正式开发之前,我们还要加一些配置来改善我们的开发体验。

接下来笔者将会手把手带你配置各种杂项。

0.eslint

写 js/ts 怎么能少得了 eslint

怎么快速安装这么多的插件(plugin)和预设(preset)呢?

首先我们 全局安装 eslintyarn global add eslint / npm i -g eslint

安装好后,这个包会在全局注册 eslint 指令。

接着在项目根目录里执行 eslint --init 就会出现一个 CLI 交互页面:



Image



按照自己的需求进行选择即可,完成后自动生成初始 .eslintrc.js,然后安装它列出来的一大堆包即可(假如需要 ts 检查的话,需要额外安装 typescript)。

同时,像我们一些编译产物的目录(dist)或者一些临时生成的 js,这些不需要做代码的校验的,我们也需要添加 .eslintignore 文件,这个文件格式和 .gitignore 类似,也是 使用 glob 语法来匹配我们不想检查的文件和目录。

1.prettier

prettier 是来格式化我们的代码的。(其实 eslint 也行)。

我们先安装好 prettier (yarn add -D prettier @types/prettier),然后再项目根目录里添加 prettier.config.js,这个文件是 prettier 格式化的配置。使用 prettier.config.js 而不是 .prettierrc 好处在于安装使用 prettier 插件更加的方便。

示例 prettier.config.js 如下:

/** @type {import('prettier').Config} */ module.exports = {   semi: false,   singleQuote: true,   endOfLine: 'lf',   tabWidth: 2,   jsxBracketSameLine: true,   trailingComma: 'es5', }

这里我用 jsdoc 来引入了 prettier 的 Config 类型,这样智能提示就出来了,很容易看出来每一项到底是什么意思。当然如果你使用 json 进行配置,想要出智能提示也很简单,添加对应的 $schema 字段,指到对应的远程url即可。

与 eslint 联动

接着我们来打通 eslint 和 prettier,把 prettier 格式化规则变成 eslint 的规则。

npm i --save-dev eslint-plugin-prettier eslint-config-prettier # or yarn add -D eslint-plugin-prettier eslint-config-prettier

其中 eslint-config-prettier 是用来避免和原先的eslint规则起冲突的。

eslint-plugin-prettier 才是把 prettier format rules 变成 eslint rules 的工具。

所以接下来,在你的 .eslintrc.js 添加

{   extends: ['plugin:vue/essential', 'standard', 'prettier']   plugins: ['prettier'],   rules: {     "prettier/prettier": 1   } }

这里个人比较喜欢使用 0,1,2 来配置 eslint0 代表 off 关闭, 1 代表 warning2 代表 error

2.sass like preprocessors

我们现在写样式,几乎离不开样式预编译器,比如 sass 或 less

笔者更喜欢 scss,在 Nuxt3 中使用 scss 非常简单,你只需要:

yarn add -D sass

把 sass 安装进来,然后在项目中添加和引用 .scss 文件或者把 .vue 中的 <style 添加 lang="scss" 属性,就能够使用 scss 了。

3.tailwindcss

tailwindcss 是我个人很喜欢的一个样式生成库,围绕着这个样式解决方案,我也做了很多的库,比如。

tailwindcss 是依赖 postcss 来加载的,我们在 Nuxt3 应用中使用它也很简单,直接安装:

npm i -D tailwindcss @types/tailwindcss # or yarn add -D tailwindcss @types/tailwindcss

为什么没有像 tailwindcss 官网的安装教程去安装 postcss 和 autoprefixer 呢 ? 这是因为 nuxt 的依赖项 @nuxt/vite-builder 已经内置了 autoprefixer 和 postcss8vite 也早已依赖了 postcss8

安装完成后,我们在根目录添加 tailwind.config.js

/** @type {import('tailwindcss').Config} */ module.exports = {   content: [     './components/**/*.{js,vue,ts}',     './layouts/**/*.vue',     './pages/**/*.vue',     './plugins/**/*.{js,ts}',     './app.vue'   ],   theme: {     extend: {},   },   plugins: [], }

然后更改 nuxt.config.ts

import { defineNuxtConfig } from 'nuxt' // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({   // ...   postcss: {     plugins: {       tailwindcss: {},     },   },   // ... })

这样 tailwindcss 就成功的引入了 Nuxt3 应用中了。

与 prettier 进行联动

很多时候我们会在一个 dom 上添加大量的原子化 class,数量一多往往排序杂乱,各个功能不一致 class 排在一起,很不整齐。这时候就需要官方出品的 prettier 插件 prettier-plugin-tailwindcss 来帮助我们进行自动的格式化排序了。我们只需要:

yarn add -D prettier-plugin-tailwindcss

在 prettier.config.js 中添加这个插件即可生效

/** @type {import('prettier').Config} */ module.exports = {   semi: false,   singleQuote: true,   endOfLine: 'lf',   tabWidth: 2,   jsxBracketSameLine: true,   trailingComma: 'es5',   plugins: [require('prettier-plugin-tailwindcss')], }

4..editorconfig

这个文件是用来配置编辑器的配置文件,vscode/webstorm 等等 IDE 都可以生效。

添加 .editorconfig 文件,然后在 .editorconfig 中添加如下配置:

[*.{js,jsx,ts,tsx,vue}] indent_style = space indent_size = 2 trim_trailing_whitespace = true insert_final_newline = true end_of_line = lf

5. git

这里我们主要配置 .gitignore 和 .gitattributes

.gitignore 用来忽略不需要提交到 git 的文件,想必大家都配置过。

.gitattributes 是 git 本地的配置文件,我们需要它来 抹平 开发者在不同操作系统上的差异,比如:开发者使用不同的操作系统,默认的文件结尾行就会不同。在 Windows 上默认的是回车换行(Carriage Return Line Feed, CRLF),然而,在 Linux/MacOS 上则是换行(Line Feed, LF)。

假如没有 .gitattributes 来配置 git 提交时的文件结尾行,那么同一个文件,被使用不同的操作系统的开发者提交后,就会相互出现换行警告,虽然能够通过一些配置来忽略,但是很不美观。

所以我们需要它来统一文件结尾行,确保每次 git 提交都能自动地设置好正确的eol

当然,这个配置你也不用害怕,在 Github 上有个项目 alexkaratarakis/gitattributes,已经把大部分情形的 .gitattributes 给写在里面了,这里我个人使用的是 Web.gitattributes 。

6. .npmrc

这个文件用来配置 npm 的运行时,对 npm,yarn,pnpm都生效,pnpm 还大大的扩展了里面的内容,详见 https://pnpm.io/npmrc

在我们给安装包的时候,npm 会按照如下顺序读取配置文件:

  1. 项目配置文件: /project/.npmrc

  2. 用户配置文件:~/.npmrc (windows 用户在 C:\Users\{username}\.npmrc 下)

  3. 全局配置文件:$PREFIX/etc/npmrc

  4. npm 内置配置文件 /path/to/npm/npmrc

当我们构建项目时,经常会使用私有的 npm 源,比如 verdaccio 来搭建。

这时候去修改全局的 .npmrc 的 registry(注册源),显然是不妥当的,我们就需要添加这个文件,更改 registry的 url 指向,从而只在当前项目中,使用这个私有 npm 源。

7. monorepo

现在单个 repo 早已无法满足我们的需求了,在项目规划之初,我们一般都会把它做成 monorepo,即一个 repo 中包含多个子 repo

这一部分详见我的仓库 sonofmagic/icebreaker.top 和 sonofmagic/utils,在这暂时不再进一步扩展。

结尾

这篇文章的核心其实在于,使用大量的配置,来提高我们的开发效率和代码质量,不是来限制我们自由的写代码,所以像 husky 这种配置,笔者并没有写上去。

在下一章节中,笔者将使用 Nuxt3 快速的开发一个静态的个人博客,让我们只需要编写 markdown 就能够快速的展现出来,并部署到公网上,在后续也会引入 serverless 和 ci,还有如何从 nuxt2 迁移的方案,敬请期待。


出现问题:

        1. vue3开启eslint之后报错:error Parsing error: ‘>‘ expected 参考链接 vue3开启eslint之后报错:error Parsing error: ‘>‘ expected

        解决办法:添加  "parser": "vue-eslint-parser",


        2.Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be             generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

            Occurred while linting C:\work\name_of_your_app\.eslintrc.js 

        解决办法 :参考链接   eslint: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser

            解决办法如下 添加project 不过 下面展示的parser 在后面发现要填在 parserOptions对象里面才行

  "parser": "@typescript-eslint/parser",  
   "parserOptions": { 
       "project": "./tsconfig.json",    
        "sourceType": "module",   
          "createDefaultProgram": true 
            },

        3.Parsing error: ESLint was configured to run on `<tsconfigRootDir>/.eslintrc.js` using `parserOptions.project`:           <tsconfigRootDir>/tsconfig.json  参考链接 TypeScript 中解决错误 Parsing Error: Cannot read file 'tsconfig.json'

        在 tsconfig 里面 添加include选项,把    ".eslintrc.js" 文件添加进去,但是这个添加进去之后会影响前面的extends里面的include没有作用了,没继续研究。暂时跑起来吧先

        4.eslint: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser 

            添加了这个    parser: '@typescript-eslint/parser', 参考链接 eslint: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser

        5. ESLint couldn't find the config "standard-with-typescript" to extend from.或者Failed to load config "standard-with-typescript" to extend from 

            这个问题的解决方案: 要安装npm包 eslint-config-standard-with-typescript

            

    6.The extension for the file (.vue) is non-standard.  

        解决方案: 参考地址 2.0.0 Parsing Issues

{
  "parserOptions": {
    "extraFileExtensions": [".vue"]
  }}
    
  • 2018-12-02 10:54:14

    HTTP长连接、短连接究竟是什么?

    HTTP的长连接和短连接本质上是TCP长连接和短连接。HTTP属于应用层协议,在传输层使用TCP协议,在网络层使用IP协议。 IP协议主要解决网络路由和寻址问题,TCP协议主要解决如何在IP层之上可靠地传递数据包,使得网络上接收端收到发送端所发出的所有包,并且顺序与发送顺序一致。TCP协议是可靠的、面向连接的。

  • 2018-12-04 15:30:01

    如何在Mac OS X上安装 Ruby运行环境

    ​ 对于新入门的开发者,如何安装 Ruby和Ruby Gems 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境。 此安装方法同样适用于产品环境!

  • 2018-12-04 15:31:15

    iOS--Pod install && Pod update

    许多人在最初接触CocoaPods时认为pod install只是在第一次为项目设置CocoaPods时使用,之后都应该使用pod update.看起来是这样,但也不是(But that's not the case at all.)。 这篇文章的目的就是教你啥时候用pod install,啥时候用pod update

  • 2018-12-04 15:33:19

    CocoaPods安装和使用教程

    当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等。可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其他类库又用到其他类库,“子子孙孙无穷尽也”,这也许是比较特殊的情况。总之小编的意思就是,手动一个个去下载所需类库十分麻烦。另外一种常见情况是,你项目中用到的类库有更新,你必须得重新下载新版本,重新加入到项目中,十分麻烦。如果能有什么工具能解决这些恼人的问题,那将“善莫大焉”。所以,你需要 CocoaPods。

  • 2018-12-04 23:37:37

    pod install 和 pod update

    当我们新建一个Podfile文件运行后,会自动生成一个Podfile.lock文件,Podfile.lock文件里存储着我们已经安装的依赖库(pods)的版本。 当我们第一次运行Podfile时,如果对依赖库不指定版本的话,cocoapods会安装最新的版本,同时将pods的版本记录在Podfile.lock文件中。这个文件会保持对每个pod已安装版本的跟踪,并且锁定这些版本。

  • 2018-12-04 23:40:26

    pod删除已导入的第三方库和移除项目中的cocoapods

    CocoaPods是一个负责管理iOS项目中第三方开源库的工具。CocoaPods的项目源码在Github上管理。在我们有了CocoaPods这个工具之后,只需要将用到的第三方开源库放到一个名为Podfile的文件中,然后在命令行执行$ pod install命令。CocoaPods就会自动将这些第三方开源库的源码下载下来,并且为我的工程设置好相应的系统依赖和编译参数. 但是如果我们导入的某个第三方不适用,或者我们又不想使用该第三方,那我们又该如何将这些相关的东西从我们的项目中清理出去呢?

  • 2018-12-04 23:41:47

    制作自己的Pod库(公有/私有)

    目的:1.管理自己常用的类;2.组件化开发步骤:1.想一个比较酷的名字,在桌面简历文件夹。2.打开terminal,cd到这个文件夹下面,执行pod lib create  xxx(这里我们以JJCategoryKit为例子,下同)命令,如下图。这个过程会问几个问题,根据实际情况输入回答即可。这里我们选择添加demo,结束的时候会自动Lanuch这个app. 作者:深水日月 链接:https://www.jianshu.com/p/ece0b5721461 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 2018-12-05 06:08:26

    CocoaPods建立私有仓库 spec repo

    好多项目里都有公共的组件,copy来,copy去很容易出错,而且不容易维护,所以就想到用用cocoapods 建自己的私有库,Carthage用法虽然相对简单,但是它是把公共组件都放在framework里不容易单步调试,所以我还是选择用Cocoapods 来建立私有仓库 参考使用Cocoapods创建私有podspec