Webpack5+vscode搭建kintone开发环境（二）代码规范配置

cybozu • 发表于：2021年01月07日 14:17:29 • 更新于：2021年07月28日 14:29:53

目录

第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11兼容
第八篇:支持React
第九篇:支持Typescript>
第十篇:命令行工具


Editorconfig

EditorConfig 是我们用来统一编辑器风格的软件，在 vscode 中我们需要安装 EditorConfig for VS Code

0015ff6ce4319a981d6939484cd40b8
在项目根目录新建 .editorconfig 文件

复制下述配置。

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf

[*.md]
trim_trailing_whitespace = false

  • indent_style：缩进风格，这里使用space替代tab。

  • indent_size：缩进大小，这里2个空格。

  • charset：编码格式，通常都是选 utf-8。

  • trim_trailing_whitespace：去除多余的空格。

  • insert_final_newline：在尾部插入新的一行。

  • end_of_line：换行符。


Prettier

Prettier 是我们用来统一代码风格的软件，对比 EditorConfig 会有更多代码方面的设置，当然也有重复部分，
建议重复部分和EditorConfig保持一致。
根目录下新建.prettierrc文件，复制如下配置：

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "endOfLine": "lf",
  "printWidth": 120,
  "bracketSpacing": true,
  "arrowParens": "always"
}

  • trailingComma：Object的最后一个属性末尾也会添加 ,

  • tabWidth：缩进大小，和EditorConfig保持一致。

  • semi：分号是否添加

  • singleQuote：是否单引号，没人想用双引号吧。。。

  • endOfLine：和EditorConfig保持一致。

  • printWidth：单行代码最长字符长度，超过之后会自动格式化换行。

  • bracketSpacing：在Object中的括号之间加入空格。

  • arrowParens：箭头函数的参数无论有几个，都要括号包裹。


安装

npm install prettier -D

注意，开发环境用的依赖需要使用 -D 参数，我们不需要把这部分代码打进最终成品中。


使用方式

标准的使用方案是用命令行输入 prettier 指令进行格式化，但我希望和 EditorConfig 一样，在开发过程中，按下保存就能自动格式化。为此，我们需要定制一下 vscode：
安装Prettier扩展
0015ff6d1a3f29acbe77b4e5acbce83添加 vscode 配置文件
在根目录下新建 .vscode 文件夹，在其下新建 settings.json，并输入

{
  "search.exclude": {
    "**/node_modules": true,
    "dist": true,
    "yarn.lock": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

  • search.exclude：哪些文件例外

  • editor.formatOnSave：保存时执行格式化代码

  • esbenp.prettier：使用prettier来格式化代码

这里默认所有的代码都会调用prettier来做格式化。


ESLint

上面的 EditorConfig 和 Prettier 都是为了解决代码风格问题，要解决代码质量问题就需要使用ESLint。
安装：

npm install eslint -D

在根目录下新建 .eslintrc.js 和 .eslintignore 来对 eslint 进行配置。


.eslintignore

它告诉 eslint 哪些文件需要忽略，让我们先输入如下代码：

/node_modules
/config
/dist
.*.js

  • node_modules是第三方包的文件夹，不需要我们的eslint介入。

  • config&.*.js基本上都是我们的配置文件，都忽略。


.eslintrc.js

这个是 eslint 的配置文件，cybozu 在 eslint-config 上提供了各种预设配置。

安装：

npm install @cybozu/eslint-config -D

在 .eslintrc.js 文件中输入如下代码：

module.exports = {
  extends: ['@cybozu/eslint-config/presets/prettier', '@cybozu/eslint-config/globals/kintone'],
}

  • globals/kintone：代码中的kintone函数将不再报错

  • presets/pretter：js规则并添加prettier支持


使用方式

一般使用 eslint 命令行来做检查，我个人建议集成 vscode 扩展 eslint
安装扩展
0015ff6d714440c5d95b39b059e58d0再到之前创建的 .vscode/settings.json 中添加以下代码：

{
  //others
  "eslint.validate": ["javascript"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  //others
}

现在只要在 js 文件中执行保存操作, eslint 就会自动修复我们的代码。


让我们来试试，新建一个 js 并输入：

var a = 1;console.log(a);

保存看看效果。var 会自动转成 const，分号会自动去掉。


StyleLint

js 代码已经有了很好的统一支持，但 css 怎么办？别忘了 kintone 的自定义开发也有 css 部分。 

这时候就需要用到 StyleLint 来帮我们解决 css 质量问题 。

安装：

npm install stylelint stylelint-config-standard -D

在根目录下新建 .stylelintrc.js，输入以下内容：

module.exports = {
  extends: ['stylelint-config-standard'],
  rules: {
    'comment-empty-line-before': null,
    'declaration-empty-line-before': null,
    'function-name-case': 'lower',
    'no-descending-specificity': null,
    'no-invalid-double-slash-comments': null,
    'rule-empty-line-before': 'always',
  },
  ignoreFiles: ['node_modules/**/*', 'dist/**/*'],
 }

  • extends：使用哪些扩展

  • rules：具体的规则，你可以自定义想要的

  • ignoreFiles: 忽略哪些文件


增强

第三方社区中有很多优秀的扩展和插件，比如 stylelint-declaration-block-no-ignored-properties 可以提示我们写的矛盾样式，避免我们犯一些低级错误。

第三方社区插件：

npm install stylelint-order stylelint-config-rational-order stylelint-declaration-block-no-ignored-properties -D

解决和 prettier 的冲突：

npm install stylelint-config-prettier -D


.更改 .stylelintrc.js 的内容：

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
  plugins: ['stylelint-order', 'stylelint-declaration-block-no-ignored-properties'],
  rules: {
    'plugin/declaration-block-no-ignored-properties': true,
    'comment-empty-line-before': null,
    'declaration-empty-line-before': null,
    'function-name-case': 'lower',
    'no-descending-specificity': null,
    'no-invalid-double-slash-comments': null,
    'rule-empty-line-before': 'always',
  },
  ignoreFiles: ['node_modules/**/*', 'dist/**/*'],
}


使用

你可以使用 stylelint 命令行，或者和上面的 eslint 一样安装扩展。这里介绍扩展的使用方式：
安装扩展
0015ff6d7352007124924614434e080

再到之前创建的 .vscode/settings.json 中添加以下代码：

{
  //others
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true,
    //others
  },
  //others
}

设置 validate false 目的是告诉 stylelint 使用自身的验证即可。

试试效果，新建一个css文件并输入：

{ display: inline; width: 100px; }

保存时会自动格式化，并提示你 Unexpected "width" with "display: inline"


目前目录下的文件结构是这样的，接下来会进入Webpack的基本配置。

.
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .prettierrc
├── .stylelintrc.js
├── .vscode
│   └── settings.json
├── node_modules
├── LICENSE
├── README.md
├── package-lock.json
└── package.json


    最多浏览的文档