Prettier Stylelint 编码中识别汇报匹配算法

文中已经参与「」

欲先善其才,工欲善其事。一个好的创业项目是必须有一个统一规范和标准,例如代码规范,款式标准及其代码提交标准等。统一的代码规范致力于提高精英团队开发设计合作、提高代码质量和打造出开发设计根基,因此大家务必严格执行。

本文将引进 ESLint Prettier Stylelint 来对编码规范性。

ESlint

ESLint 要在 ECMAScript/JavaScript 编码中识别汇报匹配算法的一种手段，它的目的是确保编码的一致性和减少风险,我们来看一下怎样在大家的项目中使用这些

最先组装 ESLint

pnpm add eslint -D -w

复位 ESLint

pnpm create @eslint/config

这时会出现一些选择项使我们挑选,如下所示

只要我们采用的是 pnpm,因此选择组装这些软件的时候选了 No,接下来我们用 pnpm 手动式组装一下

pnpm i eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D -w

这时我们不难发现网站根目录出现 ESlint 的环境变量.eslintrc.cjs,大家对于这个文档进行了一些配备里的重新编辑如下所示

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended'
  ],
  globals: {
    defineOptions: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    '@typescript-eslint/ban-ts-comment': 'off',
    'vue/multi-word-component-names': 'off'
  }
};

同时我们新创建.eslintignore来忽视一些文件信息校检

**.d.ts
/packages/easyest
dist
node_modules

最后我们在 package.json 的 script 中加入指令 lint:script

  "scripts": {
    "lint:script": "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./"
  },

随后实行pnpm run lint:script就可以看到一些不合理的地区,如今一定会有小伙伴们问为什么不可以存放的情况下全自动格式化硬盘呢,别着急,下边会提及怎样保存全自动格式化硬盘。

集成化 Prettier

却只有 ESlint 是绝对不足的, ESLint 常常融合 Prettier 一起使用更能体现它们水平,Prettier 主要是针对编码做格式化硬盘,下面我们看看如何把两者结合下去

相同的先组装Prettier

pnpm add prettier -D -w

新建文件.prettierrc.cjs

module.exports = {
  printWidth: 80, //一行的字符数，超过将进行自动换行，默认80
  tabWidth: 2, // 一个 tab 意味着好多个空格符数，默认 2 个
  useTabs: false, //是不是应用 tab 开展缩近，默认false，表明用空格符开展减少
  singleQuote: true, // 字符串数组是不是应用反斜杠，默认 false，应用引号
  semi: true, // 行尾是不是应用分号，默认true
  trailingComma: 'none', // 是不是应用尾分号
  bracketSpacing: true // 目标中括号立即是否存在空格符，默认 true，实际效果：{ a: 1 }
};

组装 eslint-config-prettier(遮盖 eslint 自身标准)和 eslint-plugin-prettier(Prettier 来接手 eslint --fix 即修补代码的水平)

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

配备.eslintrc.cjs,新增加一部分添加了注解(留意配备完了将 VSCode 格式化硬盘文本文档默认设置挑选 prettier)

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
    // 1. 连接 prettier 规则
    'prettier',
    'plugin:prettier/recommended'
  ],
  globals: {
    defineOptions: true
  },
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 2. 打开 prettier 自我修复的功效
    'prettier/prettier': 'error',
    '@typescript-eslint/ban-ts-comment': 'off',
    'vue/multi-word-component-names': 'off'
  }
};

最终实行pnpm run lint:script就可以完成 ESLint 标准校检查验及其 Prettier 的自我修复

我们一般希望在储存代码的情况下在线编辑器就能够给全自动格式化硬盘修补,VSCode 就能做到,只需要一个简单配备就可以,在设置中检索如图所示配备

那样设定完了按ctrl s就可全自动格式化硬盘编码了。

到这儿 ESlint Prettier 早已配备结束,下面再为新项目引进 Stylelint(款式标准专用工具)

Stylelint

最先组装一些软件链

pnpm add stylelint stylelint-prettier stylelint-config-standard stylelint-config-recommended-less postcss-html stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-prettier -D -w

随后新创建.stylelintrc.cjs

module.exports = {
  // 申请注册 stylelint 的 prettier 软件
  plugins: ['stylelint-prettier'],
  // 传承一系列标准结合
  extends: [
    // standard 标准结合
    'stylelint-config-standard',
    'stylelint-config-recommended-less',
    // 款式特性顺序规则
    'stylelint-config-recess-order',
    // 连接 Prettier 标准
    'stylelint-config-prettier',
    'stylelint-prettier/recommended'
  ],
  // 配备 rules
  rules: {
    // 打开 Prettier 全自动格式化硬盘作用
    'prettier/prettier': true
  }
};

在 package.json 中新增加 script 指令

{ "scripts": {
    // stylelint 指令
    "lint:style": "stylelint --fix \"*.{css,less}\""
  }
}

实行pnpm run lint:style就可以完成款式的格式化硬盘,相同的如果你想储存时自动格式化硬盘还可以在 VSCode 组装 Stylelint

安装完毕后你就会发现.vue 文档会显示不正确

主要是因为 Stylelint14 版本号之上居然兼容问题 Vue3! 我查询了在网上配置基本上都是 14 版本号一下配置,碰到这种不正确的解决方案全是降级处理。但我还是得用最新,这儿找到一个解决方案,只要我们组件库的样式文档全是分离所写的,因此我们寻找 Styulelint 配置将 vue 删除就可以

这样大家便实现了 Stylelint 配置

假如本文为你带来了协助,热烈欢迎关注点赞 关心 个人收藏!

本文相匹配编码详细地址集成项目的编程规范工具链(ESlint Prettier Stylelint) Star! Star! Star! Star!