generator-xxproject

create new project or attach some config to exist project. such as editorconfig, eslint, express, faker, jest, mongodb, prettier, next, react, stylelint, sass.

we're enable typescript by default, that means every frame like faker, jest or package tool like webpack is support typescript.

install

npm install -g yo generator-xxproject

usage

new command(recommanded)

yo xxproject:dev-env

contain the most features I used in my work day.

and it is updating

for example:

cd folder
npm init --y
yo xxproject:dev-env

it's all done. and now you can use typescript, react, jest, faker, storybook. and the config of the eslint, prettier, editorconfig, stylelint are all setted, pretty easy.

we are supported a lot of scripts which can make our life easier. the most wonderful experience is that you can use is to build commonjs, amd, umd modules from typescript, just use npm run build:commonjs, npm run build:amd, npm run build:umd.

there is some error with the npm run build:umd:min, so don't use it; TODO:

• [] full test
• [] support more features
• [] and so on.

Attach to exist project

need run npm init before, that means you shuold have a package.json file in current working directory.

Command: yo xxproject:projectName

projectName

projectName	example	Options	Note
editorconfig	yo xxproject:editorconfg	None	generate.editorconfigfile
typescript	yo xxproject:typescript	None	Add typescript to project
sass	yo xxproject:sass	None	Add sass to project
eslint	yo xxproject:eslint	—typescript —prettier	add eslint to project
stylelint	yo xxproject:stylelint	—sass —prettier	add stylelint to project
lint-staged	yo xxproject:lint-staged	None	add lint-staged to project
prettier	yo xxproject:prettier	None	add prettier to project
faker	yo xxproject:faker	None	add faker to project
Storybook	yo xxproject:storybook	None	add storybook to project
jest	yo xxproject:jest	None	add jest to project
eslint-prettier	yo xxproject:eslint-prettier	None	Add eslint-prettier to project
eslint-typescript	yo xxproject:eslint-typescript	None	Add eslint-typescript to project
stylelint-sass	yo xxproject:stylelint-sass	None	Add stylelint-sassto project
stylint-prettier	yo xxproject:styline-prettier	None	Add stylelint-prettier to project
rollup-react-lib	yo xxproject:rollup-react-lib	None	You can use it to create React UI Library
webpack-lib	yo xxproject:webpck-lib	None	You can use it to create React UI Library
dev-env	yo xxproject:dev-env	None	the most common environment I'd like to use.

editorconfig

when run yo xxproject:editorconfig,you'll get .editorconfig in the current path. The content is list below.

# http://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true

[*.md]
max_line_length = 0
trim_trailing_whitespace = false

[COMMIT_EDITMSG]
max_line_length = 0

prettier

this command will generate two files under the current path. .prettierrc.js and .prettierignore here is the prettierrc config

module.exports = {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all"
};

and in the package.json script, we generate two command for prettier

    'prettier:lint': 'prettier --config .prettierrc.js --check src/**/*',
    'prettier:lint-fix': 'npm run prettier:lint -- --write'

TODO

• complete this document
• Full test

NOTE

To make things more clearly, I drawed a picture.

The items I drawed in the picture like eslint, typescript, jest are the basic unit module, the line between them is the link, we use - in our project to relflect it, as eslint-prettier, eslint-typescript。 All of them can be installed separately, or combined with other unit module to build a develop environment。