【Vue工程】002-配置 eslnt 与 prettier

原创

訾博ZiBo 2023-05-06 00:49:13 博主文章分类：Vue.js ©著作权

文章标签 vue.js javascript 前端 typescript 配置文件 文章分类 Python 后端开发

©著作权归作者所有：来自51CTO博客作者訾博ZiBo的原创作品，请联系作者获取转载授权，否则将追究法律责任

【Vue工程】002-配置 eslnt 与 prettier

文章目录

【Vue工程】002-配置 eslnt 与 prettier
一、概述

1、ESLint 概述

它的主要特点是
使用 ESLint 的主要步骤是

2、prettier 概述

使用 Prettier 的主要好处是
使用 Prettier 的主要步骤

二、配置 eslint

1、安装 eslint
2、生成配置文件

执行命令
选项参考
当前 `package.json` 文件
生成的 `.eslintrc.cjs` 文件

3、在根目录新建 `.eslintignore` 文件
4、在 `package.json` 中添加运行脚本

三、配置 prettier

1、安装 prettier

安装 prettier
新增的开发依赖

2、创建 `.prettierrc.js` 文件
3、在根目录新建 `.prettierignore` 文件

四、`npx eslint --init` 选项详解

1、How would you like to use ESLint?
2、What type of modules does your project use?

使用ES6模块系统

3、Which framework does your project use?
4、Does your project use TypeScript?
5、Where does your code run?
6、What format do you want your config file to be in?
7、Would you like to install them now?
8、Which package manager do you want to use?

一、概述

1、ESLint 概述

ESLint 是一个静态代码分析工具,用于检查 JavaScript 代码的语法结构和查找程序错误。

它的主要特点是

可扩展性好:ESLint 支持 JavaScript 和 JSX,可以通过插件扩展到额外的语法(如 Vue)。
可配置性高:通过 .eslintrc 文件配置检查规则,可以灵活定制检查内容。
基于 AST 检查:ESLint 不仅检查语法错误,还会基于 AST 检查潜在的问题,如未使用的变量。
自动修复:ESLint 能自动修复一些问题,大大提高开发效率。
丰富的规则:ESLint 内置了200+条规则,涵盖了编码风格、潜在问题等方方面面。

使用 ESLint 的主要步骤是

安装:通过 npm 安装 ESLint 。
配置:创建 .eslintrc.js 配置文件,启用想要的规则。
检查:在命令行直接运行 ESLint,或在编辑器中集成 ESLint 。
修复:ESLint 可以自动修复一些问题,运行 eslint --fix 修复代码。
忽略文件:通过 .eslintignore 忽略不需要检查的文件。

2、prettier 概述

Prettier 是一个代码格式化工具,支持 JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, Markdown 等各种语言。

使用 Prettier 的主要好处是

统一团队的代码风格:Prettier 可以自动格式化代码,让所有人的代码都符合相同的风格规范。
无需讨论代码风格:由工具自动格式化,不需要开发人员关注代码风格,只需关注逻辑即可。
减少差异化审查:有统一的格式化标准之后,审查代码时可以更关注逻辑本身,减少因格式不同产生的差异化讨论。
集成到编辑器和工程中:Prettier 可以直接集成到编辑器和构建工具中,保存代码时自动格式化,无需手动操作。
支持多种语言:Prettier 支持主流的很多语言,帮助我们在不同语言项目中也可以保持一致的代码风格。

使用 Prettier 的主要步骤

安装:使用 npm 或 yarn 安装 prettier 。
配置:创建 .prettierrc 配置文件,配置规则。
集成编辑器:在编辑器中集成 Prettier 插件,保存自动格式化。
命令行/CI 使用:在命令行输入 prettier --write . 格式化当前目录所有代码。
忽略文件:在 .prettierignore 中配置忽略的文件。

二、配置 eslint

1、安装 eslint

pnpm i -D eslint

2、生成配置文件

执行命令

如询问

# 生成配置文件:.eslintrc.js
npx eslint --init

选项参考

PS D:\MyResearch\vue-admin\my-vue-ts> npx eslint --init 
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm

当前 package.json 文件

{
  "name": "my-vue-ts",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "@vitejs/plugin-vue": "^4.1.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vue-tsc": "^1.4.2"
  }
}

生成的 .eslintrc.cjs 文件

与文件 .eslintrc.js 无区别！
如果你的项目使用：
ES6 的 import / export,推荐使用 .eslintrc.js
Require() 函数加载,推荐使用 .eslintrc.cjs

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

3、在根目录新建 .eslintignore 文件

# 静态资源目录,无需lint
/public/*
# 第三方依赖,无需lint
/node_modules/*
# 构建输出目录,无需lint
/dist/*

4、在 package.json 中添加运行脚本

"scripts": {
    "lint": "eslint src",
    "fix": "eslint src --fix"
}

三、配置 prettier

1、安装 prettier

安装 prettier

pnpm install -D prettier eslint-config-prettier eslint-plugin-prettier

新增的开发依赖

devDependencies:
+ eslint-config-prettier 8.8.0
+ eslint-plugin-prettier 4.2.1
+ prettier 2.8.8

2、创建 .prettierrc.js 文件

module.exports = {
    // 一行的字符数，如果超过会进行换行，默认为80
    printWidth: 80,
    // 一个tab代表几个空格数，默认为80
    tabWidth: 2,
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
    useTabs: false,
    // 字符串是否使用单引号，默认为false，使用双引号
    singleQuote: true,
    // 行位是否使用分号，默认为true
    semi: false,
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    trailingComma: 'none',
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    bracketSpacing: true
}

3、在根目录新建 .prettierignore 文件

/dist/*
/html/*
.local
/node_modules/**

**/*.svg
**/*.sh

/public/*

四、npx eslint --init 选项详解

1、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 - 检测语法,找到问题并强制执行代码风格（推荐）；