三、Vue3+Ts+Vite+AntdUI构建后台基础模板——项目配置及代码规范

一、集成 Prettier 配置

1.安装Prettier

npm i prettier -D

2.创建 Prettier 配置文件

// 文件名称：.prettierrc
// 文件位置：@/.prettierrc
{
    "tabWidth": 4,
    "singleQuote": true,
    "semi": true,
    "printWidth": 200
}

3.通过命令格式化代码

npx prettier --write .

4.webstorm设置prettier

• 需要有prettier插件
• 修改file>setting>Tools>file Watchers
• 点击加号
• 选择Prettier
• file type选择JavaScript
• 勾选 Auto-save edited files to trigger the watcher
• 重复上述操作
• file type分别选择TypeScript,vue.js Template
• 即可在ctrl+s时自动格式代码
• 其他编辑器可自行百度

二、集成 ESlint 配置

1.安装 ESLint

npm i eslint -D

2.安装成功后执行

 npx eslint --init

3.步骤

1. How would you like to use ESLint? 
-选择To check syntax, find problems, and enforce code style

2. How would you like to use ESLint?
-选择JavaScript modules (import/export)

3. Which framework does your project use?
-选择 Vue.js

4. Does your project use TypeScript?
-Yes

5. Where does your code run? 
-选择Browser和Node（按空格键进行选择，选完按回车键确定）
 
6. How would you like to define a style for your project?
-选择 Use a popular style guide

7. Which style guide do you want to follow?
-选择 Airbnb
 
8. What format do you want your config file to be in?
-JavaScript
 
9. Would you like to install them now with npm?
-Yes

10. 根据以上选择，ESLint会自动去查找缺失的依赖。
-注：如果自动安装依赖失败，那么需要手动安装

4.ESlint 配置文件

// 在上一步操作完成后，会在项目根目录下自动生成 .eslintrc.js 配置文件

//暂不需要修改
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: ['plugin:vue/essential', 'airbnb-base'],
    parserOptions: {
        ecmaVersion: 12,
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {},
};

5.WebStorm中开启 ESLin

• file>Languages & Frameworks>JavaScript>Code Quality Tools>ESLint
• 选择Automatic ESLint configuration
• 其他编辑器可自行百度

三、解决 Prettier 和 ESLint 的冲突

1.安装插件

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

2.修改 .eslintrc.js

// @/ .eslintrc.js
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: ['plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended'],
    parserOptions: {
        ecmaVersion: 12,
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {},
};

3.执行格式命令

npx prettier --write .

四、视频演示及源码

本文演示视频：点击浏览

更多前端内容欢迎关注公众号：天小天个人网