中文
目录
第一篇:初始化项目
第二篇:代码规范
第三篇:Webpack 基本配置
第四篇:开发环境设置
第五篇:生产环境设置
第六篇:css、less、scss、图片支持
第七篇:IE11兼容
第八篇:支持React
第九篇:支持Typescript>
第十篇:命令行工具
Editorconfig
EditorConfig 是我们用来统一编辑器风格的软件，在 vscode 中我们需要安装 EditorConfig for VS Code
在项目根目录新建 .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扩展添加 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
安装扩展再到之前创建的 .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 一样安装扩展。这里介绍扩展的使用方式：
安装扩展
再到之前创建的 .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
