cocos creator + typescript + eslint + prettier boilerplate

您所在的位置：网站首页 › qd75d2n说明书 › cocos creator + typescript + eslint + prettier boilerplate

cocos creator + typescript + eslint + prettier boilerplate

#cocos creator + typescript + eslint + prettier boilerplate| 来源: 网络整理| 查看: 265

项目repo: https://github.com/R4M80MrX/cocos-creator-boilerplate

准备工作

环境配置:

Win10 64 位操作系统 cocos creator v2.2.1 + NodeJS v10.16.1 + Yarn v1.19.2 + VSCode git 第一步新建 cocos creator typescript 工程 2019-12-11-22-03-52.png

全点一遍

2019-12-11-22-05-40.png

至此, 一个干净的 Hello typescript 项目创建完成

第二步初始化 npm 项目

编辑器右上角打开项目所在位置, 在 VSCode 中打开项目根目录

2019-12-11-22-11-59.png

在项目根目录执行命令(后续操作如无特殊说明均在项目根目录进行) yarn 初始化工程

yarn init -y

根目录下生成 package.json 文件

{ "name": "my-cocos-demo", "version": "1.0.0", "main": "index.js", "license": "MIT" }

对 .gitignore 进行修改删除

#////////////////////////// # VS Code #////////////////////////// .vscode/

将 vscode 项目配置加入版本控制

添加

# dependencies node_modules # we use yarn package-lock.json # misc npm-debug.log yarn-error.log lerna-debug.log

将 node 模块, npm 锁文件, 和一些 log 文件排除在外

执行

git init

初始化 git 仓库

执行

git add . git commit -m 'first commit'

进行第一次提交

至此, npm 项目初始化完成

第三步添加项目配置 VSCode 安装插件 ESlint // 代码格式检查 Prettier // 代码格式美化 EditorConfig for VS Code // 编辑器统一配置 EditorConfig 的安装及配置

根目录创建 .editorconfig

# http://editorconfig.org root = true [{assets}/**.{ts,json,js}] end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true indent_style = space indent_size = 2 Prettier 的安装及配置

执行

yarn add -D prettier

安装 prettier

创建 .prettierrc

module.exports = { endOfLine: "lf", proseWrap: "always", singleQuote: true, trailingComma: "es5" };

创建 .prettierignore

lib/ build/ *.html

至此, Prettier 配置完毕

ESlint 的安装及配置

airbnb-config 官方给出的安装方法是

npx install-peerdeps --dev eslint-config-airbnb-base

在我这里要么跳过安装要么报连接错误, 只好手动安装

执行

npm info "eslint-config-airbnb-base@latest" peerDependencies

输出类似以下内容, 版本号可能不同

{ "eslint": "^5.16.0 || ^6.1.0", "eslint-plugin-import": "^2.18.2" }

按照此版本安装 eslint-config-airbnb-base 及其依赖

yarn add -D [email protected] [email protected] eslint-config-airbnb-base

执行

yarn add -D babel-eslint eslint-config-prettier

安装 babel-eslint 解析器和 eslint-config-prettier ESlint Prettier 配置插件

执行

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

安装 ESlint typescript 插件此处遇到一个问题, latest 的 typescript-eslint 版本使用了 eslint 的新方法 function-call-argument-newline 在 ESlint@^6.2 才有, 而之前与 airbnb 同时安装的版本是 6.1.0 报错, 于是重新安装了最新的 ESlint

执行

yarn add typescript

安装 typescript

创建 .vscode/settings.json 来打开 VSCode 对 eslint 的支持

{ "eslint.enable": true, "typescript.tsdk": "node_modules/typescript/lib", "eslint.validate": [ "javascript", { "language": "typescript", "autoFix": true } ] }

创建 .eslintrc

{ "extends": ["airbnb-base", "prettier"], "parser": "babel-eslint", "globals": { "cc": true }, "rules": { "no-underscore-dangle": "off" }, "parserOptions": { "ecmaFeatures": { "legacyDecorators": 1 } } }

此时已完成 ESlint + cocos creator 的基本配置, 打开 assets/Script/Helloworld.ts 在 start() {} 中输入

2019-12-12-08-30-14.png

已经可以看到 ESlint 的报错了

至此, ESlint 的基本配置完成

修改 ESlint 规则

airbnb 的 ESlint 配置对代码有严格的要求, 在使用过程中会有许多摸不着头脑的错误, 可以通过修改 .eslintrc 文件自定义规则

ESlint 有非常多的规则, 此处仅贴出一份我自用的, 根据平时写前端的 .eslintrc 修改而来的规则, 不再详细列举每一条的意义, 可以自行百度每一条规则的名字查看详细信息

{ "extends": ["airbnb-base", "prettier"], "parser": "babel-eslint", "env": { "browser": true, "node": true, "jest": true, "es6": true }, "globals": { "cc": true, "VERSION": true, "TimeoutID": true, "object": true, "__DEV__": true }, "rules": { "import/no-extraneous-dependencies": 0, "import/no-cycle": "warn", "arrow-parens": 0, "prefer-destructuring": 0, "no-async-promise-executor": "warn", "import/prefer-default-export": 0, "class-methods-use-this": 0, "no-console": 0, // "no-console": ["warn", { "allow": ["error", "warn"] }], "prefer-template": "off", "no-plusplus": 0, "no-underscore-dangle": "off", "no-nested-ternary": "warn", "import/no-named-default": 0, "import/no-webpack-loader-syntax": 0, "import/extensions": [ "error", "always", { "ts": "never", "tsx": "never", "js": "never" } ], "import/default": "error", "no-param-reassign": [ "error", { "props": false } ], "camelcase": 0, "no-bitwise": "off", "arrow-body-style": ["error", "as-needed"], "no-restricted-globals": "off", "lines-between-class-members": [ "error", "always", { "exceptAfterSingleLine": true } ] }, "overrides": [ { "files": ["**/*.ts"], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 2018, "sourceType": "module", "warnOnUnsupportedTypeScriptVersion": true }, "plugins": ["@typescript-eslint"], "rules": { "default-case": "off", "no-dupe-class-members": "off", "no-array-constructor": "off", "@typescript-eslint/no-array-constructor": "warn", "@typescript-eslint/no-namespace": "error", "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": [ "warn", { "functions": false, "classes": false, "variables": false, "typedefs": false } ], "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": [ "error", { "args": "none", "ignoreRestSiblings": true } ], "no-useless-constructor": "off", "@typescript-eslint/no-useless-constructor": "warn", "import/extensions": 0, "import/no-unresolved": 0 } } ], "parserOptions": { "ecmaFeatures": { "legacyDecorators": 1 } } }

至此, 对 ESlint 的配置已经完成

提交代码时自动检查

我们使用 git 进行版本控制利用 husky + lint-staged 可以进行代码质量的自动化检测

执行

yarn add -D husky lint-staged pretty-quick cross-env

安装相关依赖

在 package.json 中添加相关配置

"scripts": { "lint": "cross-env LINT=1 eslint --ext .js,.ts assets" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ "cross-env LINT=1 eslint --fix", "pretty-quick --staged", "git add" ] } 检验配置

打开 assets/Script/Helloworld.ts 写下 let test = 1;

GIF.gif

不出意外的话保存文件会自动修复 let 声明未变动量, 还有一个未使用变量的错误无法自动修复, 此时在根目录执行

yarn lint

检查代码

会报

C:\projectpath\assets\Script\Helloworld.ts 14:11 error 'test' is assigned a value but never used @typescript-eslint/no-unused-vars ✖ 1 problem (1 error, 0 warnings) error Command failed with exit code 1.

ESlint 检出了这个错误

此时执行

git add . git commit -m 'lint test'

也会报错并阻止你本次提交, 说明配置成功根据报错提示修改代码后提交才能成功

至此, cocos creator + typescript + ESlint + Prettier 的团队代码检测一条龙配置完成

其他配置(可选)

为了进一步保证团队环境一致和代码整洁, 还有如下配置文件可以选择性添加

.gitattributes 提交时统一使用 lf 换行

* text=auto eol=lf

.nvmrc nvm NodeJS 版本限制, 配合下面的 engine 配置使用

v10.16.2

package.json 添加如下配置

"engines": { "node": "^10.0.0" }

统一控制团队 NodeJS 版本

.yarnclean 每次安装完模块后清除 node_modules 内多余的配置, 测试,说明等不必要文件缩小项目体积

# test directories __tests__ test tests powered-test # asset directories docs doc website images # examples example examples # code coverage directories coverage .nyc_output # build scripts Makefile Gulpfile.js Gruntfile.js # configs appveyor.yml circle.yml codeship-services.yml codeship-steps.yml wercker.yml .tern-project .gitattributes .editorconfig .*ignore .eslintrc .jshintrc .flowconfig .documentup.json .yarn-metadata.json .travis.yml # misc *.md

代价是安装时多花费一点时间, 反正是自动的

进阶

再在最后讲一下使用 lerna 进行 monorepo 包管理

代码写多了以后, 经常想封装成模块以复用, 使用 lerna 可以方便地管理多个包及其之间的依赖关系

太长了, 算了, 再说吧

【本文地址】

cocos creator + typescript + eslint + prettier boilerplate

cocos creator + typescript + eslint + prettier boilerplate

今日新闻

推荐新闻