Vite2.0+Vue3.0中使用eslint+prettier的正确姿势

9,424

本文从以下几个方面展开:

  • 使用vite创建项目
  • 使用eslint+prettier规范项目

创建项目

  • 使用NPM
    npm init @vitejs/app
    

按照提示完成以下操作:

  1. 输入项目名称

    image.png

  2. 选择框架,我们使用vue

    image.png

  3. 选择vue+ts

    image.png 4.最后就是安装依赖、运行项目 npm installnpm run dev

集成prettier配置

Prettier 是一个强大的代码格式化程序,支持:JavaScriptJSXAngularVueFlowTypeScriptHTMLJSONYAML...等。它删除所有原始样式并确保所有输出的代码符合一致的样式。

  1. 安装prettier

    npm install prettier -D
    
  2. 创建配置文件 在项目根目录下面创建.prettierrc文件。(具体配置,可以查看官网Options

    {
      "useTabs": false,
      "tabWidth": 4,
      "printWidth": 100,
      "singleQuote": true,
      "trailingComma": "none",
      "bracketSpacing": true,
      "semi": false
    }
    
  3. vscode中使用需要安装插件,ctrl+s时就会读取.prettierrc文件中的配置

    如果不起作用ctrl+shift+f选择格式化程序即可。

    image.png

  4. 顺便提一下,prettier官网的文档配置怎么去看。

    image.png

集成eslint配置

随着项目越来越大,每个程序员的风格都不统一,初代开发者还好,后续开发者可能会往死吐槽,Eslint的出现帮我们解决了这个问题。

概念:Lint 是检验代码格式工具的一个统称,具体的工具有 Eslint 等等 ..........

  1. 首先安装Eslint

    npm install eslint -D
    
  2. 自动生成Eslint配置文件,详细见官网自动生成配置

    在根目录执行npm脚本命令:

    //使用npx
    npx eslint --init
    //或者按照官网来
    ./node_modules/.bin/eslint --init
    

    根据命令提示,完成操作:

    • How would you like to use ESLint? (你想如何使用eslint?)

      To check syntax only(只检查语法检查语法并发现问题
      To check syntax and find problems(检查语法并发现问题
      To check syntax, find problems, and enforce code style检查语法,发现问题,并强制代码样式) 我们选择 To check syntax, find problems, and enforce code style(检查语法、发现问题并强制执行代码风格)。

    • What type of modules does your project use?(您的项目使用什么类型的模块?)

      JavaScript modules (import/export)
      CommonJS (require/exports)
      None of these 我们选择 JavaScript modules (import/export)

    • Which framework does your project use? (你的项目使用什么框架?)

      React
      Vue.js
      None of these(这些中没有任何一个) 我们选择Vue.js

    • Does your project use TypeScript?(你的项目中使用Typescript吗?)

      Yes/No 我们选择Yes

    • Where does your code run?(你的代码运行在?)

      Browser(浏览器
      Node(Node) 我们选择Browser

    • How would you like to define a style for your project?(你想给你的项目定义什么风格?

      Use a popular style guide使用一个流行的风格指南
      Answer questions about your style(回答你关于风格的问题
      Inspect your JavaScript file(检查你的javascript文件) 我们选择 Use a popular style guide使用一个流行的风格指南

    • Which style guide do you want to follow? (你想遵循是么样的风格指南?

      Airbnb: github.com/airbnb/java…
      Standard: github.com/standard/st…
      Google: github.com/google/esli…
      XO: github.com/xojs/eslint… 上面四种风格都是社区流行的javascript风格指南,我们选择Airbnb: github.com/airbnb/java… 这个在github上面star最多的。

    • What format do you want your config file to be in?(你希望配置文件的格式是什么?

      JavaScript
      YAML
      JSON 我们选择javascript格式的配置文件

    • 最后一步就是,eslint根据上面我们选择的配置,来告诉我们:按照你这个配置,你需要安装哪些npm包,选择Yes就可以。

      image.png

  3. VSCode中使用Eslint需要安装Eslint插件

    image.png

  4. VSCode的配置

    • 全局环境中配置

      {
          "editor.codeActionsOnSave": {
              "source.fixAll.eslint": true //ctrl+s保存的时候使用eslint修复
          },
      }
      
    • 或者在局部配置

      image.png

      // setting.json文件中
      {
          "editor.codeActionsOnSave": {
                  "source.fixAll.eslint": true
          },
      }
      

常见的问题

解决prettiereslint冲突问题

在项目中,我们都是eslintprettier组合使用,难免会有冲突。下面我们分俩个方面: 呈现冲突、解决冲突

  1. 呈现冲突

    • prettier的配置如下:

      //.prettierrc.json文件中
      { 
        "tabWidth":2 ,
        "singleQuote":true //开启单引号
      }
      
    • eslint的配置如下: (只需关注rules里面配置的规则)

      module.exports = {
        env: {
          browser: true,
          es2021: true,
        },
        extends: ['plugin:vue/essential', 'airbnb-base'], // 添加 prettier 插件,
        parserOptions: {
          ecmaVersion: 12,
          parser: '@typescript-eslint/parser',
          sourceType: 'module',
        },
        plugins: ['vue', '@typescript-eslint'],
        rules: {
          'vue/no-multiple-template-root': 'off',
          quotes: ['error', 'double'],//引号规则为:“双引号”,否则一律按照 “error” 处理(你也可以改成warn试一下)
        },
      };
      

      此时当我们ctrl+s时,prettier会将所有的引号转成单引号,而我们eslint引号规则为:双引号,否则一律按照error处理,这就形成了冲突。

      image.png

  2. 解决冲突

    • 安装插件

      npm i eslint-plugin-prettier eslint-config-prettier -D
      
    • .eslintrc.js文件中配置插件

      module.exports = {
        env: {
          browser: true,
          es2021: true,
        },
        extends: [
          'plugin:vue/essential',
          'airbnb-base',
          'plugin:prettier/recommended',// 添加 prettier 插件
        ], 
        parserOptions: {
          ecmaVersion: 12,
          parser: '@typescript-eslint/parser',
          sourceType: 'module',
        },
        plugins: ['vue', '@typescript-eslint'],
        rules: {
          quotes: ['error', 'double'],
        },
      };
      
    • 完美解决冲突

      image.png

支持vue3.0中多根节点(fragements)

EslintPrettier配置完毕后,你会发现,项目神奇的报错了。

image.png

  • 错误原因:The template root requires exactly one element.// 模板只需要一个根元素

  • 解决办法: 在.eslintrc.js文件中,配置rules成功解决。

    module.exports = {
      env: {
        browser: true,
        es2021: true,
      },
      ...,
      rules: {
        'vue/no-multiple-template-root': 'off',// 关闭多根节点的校验
      },
    };
    

    image.png

知识拓展

有时候,我们项目中配置了eslint,报错了,但是你又不熟悉如何去配置某个规则。

比如console.log这样的代码不应该为error,或许应该为warn更适合。下面我们来看个例子:

image.png

官网的配置: image.png

在文件中你就可以配置:

image.png