react-cli
<p><img src="https://img.shields.io/badge/node-v10.16.0-brightgreen.svg" alt="image" loading="lazy"><br><img src="https://img.shields.io/badge/npm-v6.9.0-brightgreen.svg" alt="image" loading="lazy"><br>
<img src="https://img.shields.io/badge/vscode-v1.35.1-brightgreen.svg" alt="image" loading="lazy"></p>
<h1 id="更新日志">更新日志：</h1>
<h2 id="v120">v1.2.0</h2>
<p>...未完待续</p>
<h2 id="v110">v1.1.0</h2>
<ul>
<li>添加editorconfig</li>
<li>配置ESLint</li>
<li>集成prettier</li>
<li>集成 lint-staged</li>
</ul>
<h3 id="实现细节">实现细节：</h3>
<h4 id="添加editorconfig">添加editorconfig</h4>
<p>editorconfig 帮助我们约束多个开发者在同一个项目中代码风格，更重要的是它是跨编辑器，IDE 的。</p>
<pre><code># http://editorconfig.org
# 这是根文件，不用继续往上查找
root = true
# 匹配全部文件
[*]
# 缩进风格，可选"space"、"tab"
indent_style = space
# 缩进的空格树 2
indent_size = 2
# 结尾换行符，可选"if"、"or"、"orif"
end_of_line = lf
# 设置字符集
charset = utf-8
# 删除一行中的前后空格
trim_trailing_whitespace = true
# 在文件结尾插入新行
insert_final_newline = true
</code></pre>
<h4 id="配置eslint">配置ESLint</h4>
<p>ESLint 可以约束团队成员的代码风格，并且找出一些容易产生问题的代码。<strong>vscode 中安装 ESLint</strong> 后可以在 问题 面板中看到 ESLint 提示的各种错误。ESLint 自带的 autoFix 也挺好用的。</p>
<p>create-react-app 默认集成了ESLint, 要让编辑器正确提示ESLint错误，需要在项目根目录添加 .eslintrc.js:</p>
<pre><code>/**
* create-react-app默认集成了ESLint, 此配置让编辑器正确提示ESLint错误
*/
module.exports = {
extends: ['react-app'],
};
</code></pre>
<p>并且将package.json的配置移除</p>
<pre><code>-"eslintConfig": {
- "extends": "react-app"
-},
</code></pre>
<p>为了让vscode的eslint插件启用typescript支持，需要添加下面的配置到项目文件夹中 文件->首选项-> 设置-> 项目文件夹。或者你也可以专门去保存工作区，添加这些配置到工作区中。</p>
<pre><code>{
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
]
}
</code></pre>
<h4 id="集成prettier">集成prettier</h4>
<p>你进一步编辑 .eslintrc.js 文件，这些更改也 只会影响编辑器集成。它们不会影响终端和浏览器中的 lint 输出。这是因为 Create React App 有意提供了一组最常见的错误规则。</p>
<p>如果要为项目强制执行编码风格，就需要考虑使用 Prettier 而不是 ESLint 样式规则。</p>
<pre><code>/**
* https://prettier.io/docs/en/options.html：请确保先执行了 npm i -D prettier
* 项目代码风格优先级
* 1. .perttierc.js
* 2. .editorconfig
* 3. vscode中的设置
*/
module.exports = {
// 指定打印机将换行的行长度。默认 80
printWidth: 100,
// 指定每个缩进级别的空格数。默认 2
// tabWidth: 2,
// 指定使用制表符缩进行。 默认 false
// useTabs: false,
// 在语句末尾打印分号。默认 true
// semi: true,
// 使用单引号而不是双引号。默认 false
singleQuote: true,
// 引用对象中的属性时更改：默认 as-needed-仅在需要时在对象属性周围添加引号。可选"consistent" - 如果对象中至少有一个属性需要引号，则引用所有属性。"preserve" - 尊重对象属性中引号的输入用法。
// quoteProps: 'as-needed',
// 在jsx中使用单引号。默认 false
jsxSingleQuote: true,
// 多行时尽可能打印尾随逗号。默认 none-没有尾随逗号。可选：es5：在ES5中有效的尾随逗号（对象、数组等）。例如本文件，设置成 es5，就算你最后一个属性-属性值没有加逗号，也会帮你自动加上逗号
trailingComma: 'es5',
// 在对象文字中打印括号之间的空格。默认 true
// bracketSpacing: true,
// 将>多行JSX元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。默认false
// jsxBracketSameLine: false,
// 在单个箭头函数参数周围加上括号。默认 avoid-尽可能的省略parens。例 x => x。可选 "always"-使用包括parens。例 (x) => x
arrowParens: 'avoid',
// 指定格式化文件的开始行。默认 0
// rangeStart: 0,
// 指定格式化文件的结束行。默认 Infinity
// rangeEnd: Infinity
// 指定要使用的解析器。prettier会自动从输入文件路径中推断出解析器。因此不必更改此设置。默认 babylon
// parser: 'babylon'
// 指定用于推断要使用的解析器的文件名
// filepath: ''
// 需要编译指示。默认 false
// requirePragma: false
// 插入Pragma。默认 false
// insertPragma: false
// 散文包裹。默认 preserve-按原样包装散文。可选，always-如果超过打印宽度就包装。never-不要包装
// proseWrap: 'preserve'
// HTML空白灵敏度 默认 css-尊重css display属性的默认值。可选：strict-空格被认为是敏感的，ignore-空格被认为是不敏感的
// htmlWhitespaceSensitivity: 'css',
// 行结尾：默认 auto-维护现有的行结尾，可选 lf-(\n)，在Linux和macOS以及git repos 内部很常见 crlf-回车符+换行符(\r\n), 在Windows上很常见 cr-仅限回车符，很少使用
// endOfLine: 'auto',
};
</code></pre>
<h4 id="集成-lint-staged">集成 lint-staged</h4>
<p>前面虽然是在自己的电脑自己的编辑器里添加了一些配置，当自己保存时就可以自动格式化自己写的代码。我但是我们并不能强求别人也用vscode来编码，可能别人用习惯了webstorm等。这时候为了继续维持项目统一的风格，最好是在react-cli脚手架工具中直接体现，而尽可能少的让别人需要去做别的编辑器配置。</p>
<p>这一小节做的就是让大家在git commit的时候自动触发prettier格式化代码的命令。</p>
<pre><code>npm i -D husky lint-staged
</code></pre>
<p>接下来配置 husky 和 lint-staged。在package.json中加入下面内容。</p>
<pre><code>"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --single-quote --write",
"git add"
]
},
</code></pre>
<h2 id="v100">v1.0.0</h2>
<ul>
<li>npm 设为淘宝源</li>
<li>在TypeScript中使用antd</li>
<li>国际化</li>
</ul>
<h3 id="实现细节-1">实现细节：</h3>
<h4 id="npm-设为淘宝源">npm 设为淘宝源</h4>
<pre><code>npm config set registry https://registry.npm.taobao.org
</code></pre><br><br>
来源：https://www.cnblogs.com/hezhi/p/11023275.html
頁:
[1]