uniapp配置初始化项目篇

不管什么项目，基本都会遵循公司的一些规范，包括约定的一些目录规范，还有代码规范等；就像java里面默认遵循的是阿里巴巴Java规范一样。创建uni项目的过程不再赘述

一 eslint

注意：eslint 9.X版本有了重大更新，其中配置文件，依赖项都有改变，以下介绍的是 8.X版本的依赖和配置方式.至于有什么区别，请移步官网查看，这里不做过多解释（Eslint传送门）

1,安装

yarn add -D eslint@8.57.0

安装一般是通过npm/yarn/pnpm 直接下载对应的包即可，但是，这里如果要安装8.x的包，要指定一下对应的版本号即可，下面以8.57为例

2，配置eslint配置文件

2.1，正常情况下

运行 pnpm eslint --init#或 npx eslint --init#或./node_modules/.bin/eslint --init命令，根据提示初始化对应的配置项

2.2，TypeScript使用eslint

如果项目使用了ts，那么通过npx eslint --init上面这种方式，eslint会自动安装typescript需要包，如果是手动安装，那么也需要安装两个依赖包

• @typescript-eslint/parser：ESLint 的解析器，解析 TypeScript，检查和规范 TypeScript 代码；
• @typescript-eslint/eslint-plugin：ESLint 插件，包含了定义好的检测 TypeScript 代码的规范。

下面👇是我自己生成的.eslintrc.js配置文件

2.3，globals配置uni的全局变量参数，防止使用uni的时候eslint报未定义的错误

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  globals: {
    uni: 'writable'
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-essential', 'plugin:prettier/recommended'],
  overrides: [
    {
      env: {
        node: true
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script'
      }
    }
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'vue'],
  rules: {
    // 要求组件名称以驼峰格式命名，自定义组件名称应该由多单纯组成，防止和html标签冲突
    'vue/multi-word-component-names': 'off',
    // 使用单引号
    quotes: ['error', 'single'],
    // 禁用未声明的变量
    'no-undef': 'error',
    // 禁用未使用的变量
    'no-unused-vars': 'error',
    // 关闭ts中形参未申明的警告
    '@typescript-eslint/no-undef': 'off'
  }
};

2.4，如果安装报错情况请看👇

手动安装依赖，忽略掉警告即可

npm i eslint-plugin-vue @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --legacy-peer-deps -D

2.5 为ESLint忽略指定文件 .eslintignore

node_modules
dist
src/uni_modules/*
src/unpackage/*
src/uniCloud-aliyun/*

二 安装prettier

1，下载prettier以及对应的依赖项

eslint-config-prettier和eslint-plugin-prettier用来解决eslint和prettier部分规则冲突问题

    pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D`x
    npm i prettier eslint-config-prettier eslint-plugin-prettier -D
    yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

2，安装成功后，在eslint配置文件extends选项的最后一项位置，追加“plugin:prettier/recommended”配置

3，在项目根目录创建.prettierrc.cjs文件，配置Prettier规则

4，新增.prettierrc.cjs配置文件

module.exports = {
    printWidth: 200, // 一行最多80个字符
    tabWidth: 2, // 设置工具每一个水平缩进的空格数
    useTabs: false,//不使用缩进,而使用空格
    semi: true, // 句末是否加分号
    vueIndentScriptAndStyle: true,//Vue文件中＜script＞和＜style＞是否缩进
    singleQuote: true, // 用单引号
    trailingComma: 'none', // 最后一个对象元素符加逗号
    bracketSpacing: true,// 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always', // 不需要写文件开头的 @prettier
    insertPragma: false, // 不需要自动在文件开头加入 @prettier
    endOfLine: 'auto' // 换行符使用 auto
}

5，重启VSCode（不重启，规则不生效哦）

control + shift + P ｜ command + shift + P 输入reload window重启

图上图👆所示，应该可以看到eslint生效了，记得去rules里面配置eslint 的规则

6，为Prettier忽略指定文件 .prettierignore

node_modules
dist
src/uni_modules/*
src/unpackage/*
src/uniCloud-aliyun/*

三 配置eslint规则

规则有很多，可以随意增加或者删改

{
    rules: {
        // 要求组件名称以驼峰格式命名，自定义组件名称应该由多单纯组成，防止和html标签冲突
        'vue/multi-word-component-names': 'off',
        // 使用单引号
        quotes: ['error', 'single'],
        // 禁用未声明的变量
        'no-undef': 'error',
        // 禁用未使用的变量
        'no-unused-vars': 'error',
        // 关闭ts中形参未申明的警告
        '@typescript-eslint/no-undef': 'off'
  }
}

上面介绍了一下最基础的eslint,prettier的配置方法，如果有误，还清大家指出

《uniapp配置husky,lint-stage,commitlint规范（下篇）》