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


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复