环境安装
原⽣安装
Node.js: 安装稳定版（偶数版本的最新版）（并熟悉npm的基本命令）
Nvm: nodejs的版本管理⼯具，可以安装多版本的node
yarn: ⼀个package manager，与npm⼆选⼀，⼀般取决于项⽬脚⼿架使⽤的是哪个，默认⽤npm
Git: 版本管理（并熟悉git的常⽤命令）
tippecanoe: [Advanced][by mapbox]⽣成⽮量地图切⽚
Node安装
使⽤npm install -g xxx
pm2: ⽤来跑nodejs的守护程序，⽣产环境使⽤
nodemon: ⽤来测试nodejs项⽬的守护进程，监控⽂件改变，⾃动重启
eslint: 代码检查⼯具
babel-cli: 代码编译⼯具
geobuf: 转换地图数据的⼯具 shp/geojson/pbf/postgis/mysql
编辑器：VS Code
必装插件
基础语法
Babel Javascript：JS语法⾼亮
JavaScript (ES6) code snippets: 快捷语法⽚段
Reactjs code snippets: React的代码⽚段
Path Intellisense: 路径提示和⾃动补全（例如import时）
Document This: ⾃动⽣成注释模板
代码检查、优化和美化
Prettier: 代码格式化
Eslint: 配合Eslint的插件，错误⾼亮/⾃动修正错误（并开启autofix）
SonarLint: 帮助你写出更好的代码
⾼亮
TODO Highlight: ⾼亮TODO，同时可以⾃定义其他⾼亮关键词例如FIXME/MARK等
Color Highlight: ⾼亮代码中的j颜⾊部分，很直观
Highlight Bad Chars: ⾼亮代码中出现的奇怪字符（包含不可⻅字符）Git
Git History: 查看提交⽇志的⼯具
GitLens：超强的Git⼯具合集，基本包含所有东⻄
其他⽂件类型
Easy LESS: ⾃动将LESS编译成CSS
EditorConfig for VS Code: 有些项⽬会带有EditorConfig
Markdown All in One: 可以预览，编辑markdown⽂件
Markdownlint: md⽂件代码检查
YAML: 常⽤的⼀种配置⽂件⾼亮
常⽤功能
Remote Development: 远程开发必备神器
Code Runner：⽤来测试代码⽚段，选中执⾏，很好⽤
npm(by Microsoɇ ): npm的插件
TODO Parser: ⽤来统计总TODO数
Partial Diffff: ⽤来⽅⾯地diffff⽂件或代码⽚段
可选插件
⼯具
Data Preview: 可以查看Excel等类型⽂件
Rainbow CSV: 颜⾊区分csv⽂件不同列
SVG Viewer: 查看svg图⽚
美化
Atom One Dark Theme: ⼀个不错的界⾯主题
Vscode-icons: 图标美化
语⾔
Python: 谁都得会点python
BetterTOML: toml配置⽂件
Tailwind CSS IntelliSense: 使⽤tailwindcss作为css⽅案时的必选插件
注：其他类型的语⾔插件可以随⽤随装
开发⼯具
“A good workman is known by his tools.” —— 谚语
相关⼯具
SourceTree: git仓库管理
ShadowSocks: 翻墙⼯具
EasyConnect: VPN⼯具
QGIS: 地图处理
Navicat: 数据库⼯具MobaXterm/cmder: 模拟终端
常⽤服务
Geoserver: 栅格地图服务器
Tileserver: ⽮量地图服务器
Swagger: 后端接⼝Doc⻚⾯
Chrome插件
Talend API Tester: 测试接⼝（也可使⽤postman，这个⽐postman轻量级些）
React devtools: React的官⽅开发插件
Axure RP Extension for Chrome: 查看Axure原型
⼯具⽹站
mapshaper: https://mapshaper.org/地图简化
codepen: https://codepen.io/代码prototype & share
codesandbox: https://codesandbox.io/代码prototype & share
htmlcolor: https://htmlcolorcodes.com/取⾊
diagrams: https://app.diagrams.net/画流程图
tinypng: https://tinypng.com/压缩图⽚
json2ts: http://json2ts.com/根据JSON⽣成TS类型
jsonlint: https://jsonlint.com/校验json数据合法性
quicktype: https://app.quicktype.io/根据JSON⽣成各种语⾔的类型定义
gsojson.iso: http://geojson.io/⽣成简易的geojson
epsg: https://epsg.io/坐标系转换及定位
gaoding: https://ps.gaoding.com/#/在线ps
开发规范
原则
保持“⼀致性”，按照模板的约定“照猫画⻁”，严禁随意发挥
主动降低⾃由度，相似功能使⽤相同的⽅式进⾏实现
积极进⾏代码提取、抽象、随时准备并主动进⾏代码重构
不可以有任何runtime error ! devtools⾥不可以有任何“红⾊”
消除所有的eslint错误，编辑器中不能有任何“波浪线”（除⾮有充⾜的理由并进⾏原因注释）
⾯向协作，代码不仅要“能⽤”，还要“好看”，要“清晰易懂”
⼯程结构
⼯程结构严格按照模板组织
lock⽂件要放⼊版本管理中，不能放⼊gitignore⽂件
⼯程配置统⼀使⽤模板给定的配置，包括babelrc/ eslintrc/ eslintignor / gitignore
PUBLIC_URL、env.js所有的⽂件都需要使⽤UTF-8编码
安装依赖时，分清楚dependencies和devDependencies
每个项⽬，都要写⼀个README.md，⾥⾯写清楚以下内容
项⽬描述，提供什么功能
代码结构，每个⽂件夹下放的是什么东⻄，重要⽂件是哪⼏个
使⽤了后台的哪些服务，接⼝在哪⾥
代码和⽂件拆分规则
尽量降低模块之间的耦合度，拆分成逻辑组件和UI组件⽅便复⽤
只要出现了重复代码，就应该提取出来
⼀般⽽⾔⼀个⼯具类模块⽂件不要超过500⾏，否则就要考虑拆分
代码注释
凡是⾮私有的函数（例如export的部分），都必须加上注释，使⽤JSDoc的⽅式（⽤Document this加），写明说明/输⼊/输出
私有的函数如果内容较多较复杂或逻辑不容易⼀眼看出，也要加注释，格式可以
较为简单，说明功能即可
其他常规地⽅，通过合理语义化的变量命名和简洁的写法表达，可以⼀眼看出逻辑和⽬的的，或模板性的内容，不需要加注释
合作开发流程
项⽬创建时需约定好合作开发流程(trunk-based OR git-flow)
严格遵守约定好的合作开发流程
熟悉git操作、熟悉冲突解决和版本回滚
使⽤相同的编辑器代码⾃动format⽅式，保证autofix后代码⻛格⼀致（开发前约定）
代码约束
代码使⽤空格缩进，tabsize 2个空格
除历史遗留项⽬之外，全⾯使⽤Typescript进⾏代码编写，⾮特殊情况不使⽤any
类型
除历史遗留项⽬之外，全⾯使⽤新的Hook的写法
使⽤ES6的语法进⾏代码编写
遇到问题⾸先想想/搜搜是否有成熟的库解决，Github star⼤于200可以直接拿来
⽤，⼩于200可以考虑⼀下库是否成熟。同时也要了解私有npm仓库中的内容，⽅便取⽤
⾮涉及到严重性能问题时，任何函数都不可以修改传⼊的参数
严禁⼤规模拷⻉代码（⼩规模代码⽚段可以拷⻉，但也要思考是否应该进⾏公共
代码提取，并且拷⻉完之后⽴刻进⾏相关命名的修改）
代码⾥不要出现业务相关的数字和字符串(hardcode)，都应该放进配置⽂件中去
及时删除⽆⽤的代码，保持代码的⼲净整洁
严禁全⽂禁⽤eslint，eslint报错后应⾸先看⼀下如何解决（搜索对应报错即可），实在没有办法，再⽤eslint-disable-next-line，并需要注明理由，
codereview时需要有合理的理由解释
css-in-js在同⼀项⽬中使⽤统⼀的⽅案，建议使⽤styled�
components/emotionjs/styled-jsx/tailwindcss/less等，项⽬开始时进⾏约定。⽣产中禁⽌直接在render内写style object对象内元素层级取值使⽤ramda/path⽅式（TS中使⽤?.）避免出现undefined，严禁毫⽆保护的a.b.c.d形式取值
尽量使⽤函数式编程⽅式，减少各种for loop
组件内的回调函数需要使⽤useCallback，变量需要使⽤useMemo，函数组件需
要使⽤React.memo
使⽤Redux时，需要按照需要进⾏参数注⼊，严禁直接把全部props作为参数注⼊
(严重影响效率)
使⽤map时，不可以使⽤index作为key
命名规则
⽂件命名：如框架有约定，按照框架约定，否则全部⼩写⽤横杠”-”连接
注：如果涉及到⼤写字⺟，⼀定要注意不同操作系统(windows/macos)对于⼤⼩写敏感性处理不同且git的配置常会忽略⼤⼩写，导致编译失败，因此需要格外⼩⼼
⽂件夹命名：如框架有约定，按照框架约定，否则全部⼩写⽤横杠”-”连接
命名：同类的⽂件在同⼀个⼯程内，严禁出现两套命名规则camelCase, PascalCase, ABC_DEF, abc-def变量/函数命名全部⽤camel形式，类名/组件名全部⽤Pascal形式，常量⽤全⼤写
下划线形式AA_BB
尽量不要使⽤各种简写，不要害怕名字⻓
起名字不要使⽤过于通⽤的名称，否则容易出现冲突，后续新增也容易导致不⼀致
不会翻译的词去查⼀下，不要乱写
框架
简单系统可以不使⽤框架，直接create-react-app
稍复杂⼀些的系统要使⽤Redux管理状态
类似业务系统使⽤antd-design-pro的框架(新版)
优化实践
性能优化
在所有组件内加上console.log，看下是否存在不合理的重复渲染
如果有，往往是由于以下⼏个原因：
未使⽤useCallback和useMemo
参数传递不精准(传递了很上层的props)组件划分和拆分不合理(不同渲染频率的组件未拆开导致很多⽆效渲染)
代码健壮性
对象内元素层级取值使⽤ramda/path⽅式（TS中使⽤?.）避免出现undefined
使⽤严格的Typescript类型来保证类型准确和系统内部运⾏时安全
使⽤decoders/flow-runtime保证在系统边界(接⼝、三⽅库)进⾏数据校验，避
免脏数据影响系统内部安全
⾃动化测试
使⽤playwright等⾃动化测试⼯具进⾏单元测试和e2e的⾃动化测试。
使⽤TDD⽅式进⾏开发，先写测试、再写代码。
常规数据 + 边界数据 + ⾮法数据
带有关键/复杂逻辑的函数⼀定要进⾏单元测试，关键的流程，容易出问题的环节都需要使⽤e2e进⾏测试。
代码⻛格
使⽤函数式替代过程式(map/filter/reduce等替代for)
组件抽取的层级和标准保持⼀致，需要有规则，包括命名、内部复杂性等。
例如抽取container层，⽂件命名全部为xxx-container，组件命名全部为 XxxContainer，内部全部使⽤redux connect⽅式。抽取components层，全部为纯函数(没有state)等。规则可以根据项⽬实际需要定制，但要⼀致，减少认知负担，加强可协作性。
⻛格上的重构⼀定要全部重构，避免中途出现不⼀致
熟悉并使⽤ES6/ES7/ES8/ES9/ES10语法例如结构、箭头函数、promise、
async/await、Object.entries、Rest spread等（同时注意兼容性、使⽤babel转译）
适配
分辨率适配⽅案，响应式设计，通过flex布局和可变尺⼨的元素调节达成
兼容性适配，browserslist
JS常⽤⼯具库
通⽤库
Moment.js: ⽤来处理时间数据
Numeral: ⽤来处理和格式化数字
Turf: 很好⽤的处理地理信息的库，Mapbox出品
Ramda: 常⽤⽅便函数库
Pbf, geobuf: ⽤来解析pbf地图数据
D3: 多种⼯具，不局限于可视化，提供很多数学⼯具
Tween.js: 处理动画的库
echarts/bizcharts: 图表库
file-saver: 下载⽂件mapbox-gl.js: 地图展示
openlayers: [Deprecated]地图展示库，除既有系统外不再使⽤
Deck.gl: 地图数据可视化库，最好搭配react
Storybook: ⽤来测试组件单例的框架
cross-env: 跨平台处理环境变量，统⼀打包命令
decoders/flow-runtime: 边界(接⼝、三⽅库)数据格式检查
quill: ⼀个WYSIWYG编辑器
hls.js/video.js: 播放hls等视频的组件
aframe: VR 360度图⽚查看
lottie-web: 加载lottie动画⽂件
React库
Styled-components: 创建定制化UI components的React库
emotion.js: 创建定制化UI components的React库
tailwindcss: ⼀个预定义的css解决⽅案
React-virtualized: ⾼效显示超⼤列表和表格
React-Redux: state管理
Immutable.js: 提供immutable的⽀持，保证不意外修改变量
react-grid-layout: 可变的格⼦布局，类似各种dashboard
react-motion: 处理动画
remarkjs: 处理markdown⽂件的库
react-highlight: 处理⾼亮的库
react-dnd: 处理拖拽的库
react-pdf/pdf.js: 展示pdf⽂件
