前端开发多人协作的团队项目时应该要配置的一些规则

本文主要记录了团队开发一个前端项目需要进行的一些前期配置,例如Eslint语法检验,prettierrc格式化规则,以及提交代码时的规则等等。

目录

1.搭建项目

 2.Eslint配置(代码检验工具)

2.1安装Eslint

2.2配置Eslint 

2.3.eslintignore忽略文件(忽略掉不需要检验的文件)

2.4 添加运行脚本

3.配置prettier格式化

 3.1安装需要的依赖

3.2.prettierrc.json添加规则

3.3 .prettierignore忽略文件

 4.配置stylelint

4.1配置

4.2 忽略文件

4.3 添加运行脚本

4.4 使用格式化

 5.配置husky

 6.配置commitlint

 7.强制统一包管理器工具


我搭建的项目结构是:Vue3 + Ts + Vite + scss

用到的编译器:WebStorm

包管理工具:pnpm

1.搭建项目

之所以选择pnpm,是因为它比一些类似的包管理器要更加的有优势:比如速度更快,内存小等

初次使用pnpm时需要先进行全局安装

npm i -g pnpm

初始化项目

pnpm create vite

然后按照自己需要的项目来选择即可

进行的初步配置:让项目在启动时,自动打开浏览器,不需要手动去打开

在package.json文件中的启动项目配置中加上 --open

前端开发多人协作的团队项目时应该要配置的一些规则_第1张图片

 2.Eslint配置(代码检验工具)

简介:ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

2.1安装Eslint

首次安装

pnpm i eslint -D

生成配置文件:.eslint.cjs

npx eslint --init

选择配置:

前端开发多人协作的团队项目时应该要配置的一些规则_第2张图片

前端开发多人协作的团队项目时应该要配置的一些规则_第3张图片

前端开发多人协作的团队项目时应该要配置的一些规则_第4张图片

前端开发多人协作的团队项目时应该要配置的一些规则_第5张图片

前端开发多人协作的团队项目时应该要配置的一些规则_第6张图片

前端开发多人协作的团队项目时应该要配置的一些规则_第7张图片

 接下来会问下是否需要下载一些用来检查vue语法和ts语法的插件,选择Yes即可

前端开发多人协作的团队项目时应该要配置的一些规则_第8张图片

 然后会问你用的包管理器工具是什么,根据自己来选择即可

前端开发多人协作的团队项目时应该要配置的一些规则_第9张图片

2.2配置Eslint 

接下来就会成功一个配置文件

module.exports = {
    //运行环境
    "env": {
        "browser": true,//浏览器端
        "es2021": true,//es2021
    },
    //规则继承
    "extends": [
        //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
        //比如:函数不能重名、对象不能出现重复key
        "eslint:recommended",
        //vue3语法规则
        "plugin:vue/vue3-essential",
        //ts语法规则
        "plugin:@typescript-eslint/recommended"
    ],
    //要为特定类型的文件指定处理器
    "overrides": [
    ],
    //指定解析器:解析器
    //Esprima 默认解析器
    //Babel-ESLint babel解析器
    //@typescript-eslint/parser ts解析器
    "parser": "@typescript-eslint/parser",
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",//校验ECMA最新版本
        "sourceType": "module"//设置为"script"(默认),或者"module"代码在ECMAScript模块中
    },
    //ESLint支持使用第三方插件。在使用插件之前,您必须使用npm安装它
    //该eslint-plugin-前缀可以从插件名称被省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    //eslint规则
    "rules": {
    }
}

详情配置选择可以根据自己的项目需要来配置,参考官网:ESLint - Pluggable JavaScript linter - ESLint中文

 安装Vue3环境代码检验的插件(根据自己的项目需求来就行)

# 让所有与prettier规则存在冲突的Eslint rules失效,并使用prettier进行代码检查
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
# 运行更漂亮的Eslint,使prettier规则优先级更高,Eslint优先级低
"eslint-plugin-prettier": "^4.2.1",
# vue.js的Eslint插件(查找vue语法错误,发现错误指令,查找违规风格指南
"eslint-plugin-vue": "^9.9.0",
# 该解析器允许使用Eslint校验所有babel code
"@babel/eslint-parser": "^7.19.1",

安装插件:

pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser

修改.eslintrc.cjs配置文件:


module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  /* 指定如何解析语法 */
  parser: 'vue-eslint-parser',
  /** 优先级低于 parse 的语法解析配置 */
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    jsxPragma: 'React',
    ecmaFeatures: {
      jsx: true,
    },
  },
  /* 继承已有的规则 */
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  /*
   * "off" 或 0    ==>  关闭规则
   * "warn" 或 1   ==>  打开的规则作为警告(不影响代码执行)
   * "error" 或 2  ==>  规则作为一个错误(代码不能执行,界面报错)
   */
  rules: {
    // eslint(https://eslint.bootcss.com/docs/rules/)
    'no-var': 'error', // 要求使用 let 或 const 而不是 var
    'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-unexpected-multiline': 'error', // 禁止空余的多行
    'no-useless-escape': 'off', // 禁止不必要的转义字符

    // typeScript (https://typescript-eslint.io/rules)
    '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
    '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
    '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
    '@typescript-eslint/semi': 'off',

    // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
    'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
    'vue/script-setup-uses-vars': 'error', // 防止
                    
                    

你可能感兴趣的:(前端,vue.js,前端,javascript)