emo——给项目配置prettier，eslint，husky加强协作规范

2022-09-05 21:34:10 阅读：186 来源： 互联网

标签：docs emo add prettier husky true eslint

前言

给自己的一个初始化项目配置一些规范;
Prettier - Code formatter: Prettier - Code formatter
ESLint: ESLint
Git gitignore: https://git-scm.com/docs/gitignore#_pattern_format

内容

说实话整个配置起来,如果自己从头到尾看文档搞,真的有点耗时间;
主要分为prettier,eslint,husky三部分做配置,最后加上vscode对应的插件;
后续根据实际开发中遇到的坑会再往这里添砖加瓦;

prettier

prettier cli: https://prettier.io/docs/en/cli.html
prettier options: https://prettier.io/docs/en/options.html
prettier ignore: https://prettier.io/docs/en/ignore.html

安装

 pnpm add -D prettier

配置.prettierrc

?> 在项目的根目录添加.prettierrc文件

!>详细参数请查看prettier options文档;

{
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": false,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "bracketSameLine": true
}

配置.prettierignore

?> 在项目的根目录添加.prettierignore文件,并根据自身实际情况配置;

!>详细参数请查看prettier ignore文档;

node_modules/**
dist/**
release/**
public/**

ESlint

ESlint getting-started: http://eslint.cn/docs/user-guide/getting-started
ESlint configuring: http://eslint.cn/docs/user-guide/configuring
ESlint ignoring-code: the-eslintignore-file

安装

pnpm add -D eslint

初始化配置

?> 配置文件eslint

npx eslint --init

!> 安装完成后提示缺少依赖,所以又安装了下依赖pnpm add -D @typescript-eslint/parser

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript',
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
  }
}

配置eslint-plugin-prettier

pnpm add -D eslint-config-prettier eslint-plugin-prettier

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard-with-typescript',
    // 增加prettier
    'plugin:prettier/recommended',
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
   // 有冲突的可以在这里解决
  }
}

配置.eslintignore

node_modules/**
dist/**
release/**

husky

安装

pnpm add -D husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

配置package.json

{
"lint-staged": {
    "**/*": [
        "prettier --write --ignore-unknown",
        "eslint --fix",
        "git add ."
    ]
  },
}

提交

?> 在git commit时就会去检测并进行修复;

标签：docs,emo,add,prettier,husky,true,eslint
来源： https://www.cnblogs.com/wangyang0210/p/16658361.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9