ync-cli-eslint-config
v0.1.5
Published
eslint, prettier 配置方案
Readme
简介
eslint, prettier 配置方案
如何扩展此 cli 工具
相关命令
# 安装依赖【切记不能通过 cnpm 安装，否则下面 link 和 test 会报错】
npm ci
# link
npm run link
# 本地测试
npm run test
# 发布
npm publish --access=public项目相关 npm 包
一、prettier
eslint-config-prettier
二、eslint
eslint
eslint-plugin-import
1、js
@babel/core
@babel/eslint-parser
eslint-config-airbnb [用到才安装]
2、react
eslint-plugin-react,
eslint-plugin-react-hooks,
eslint-plugin-jsx-a11y
3、taro
eslint-plugin-taro
4、ts
@typescript-eslint/parser
eslint-import-resolver-typescript,
@typescript-eslint/eslint-plugin,
eslint-plugin-deprecation
三、alias
eslint-import-resolver-alias如何使用此 cli 工具
# 依赖安装
npm install ync-cli-eslint-config -D
# 使用方法
npx ync-eslint-config -t -a -f react参数描述
| 参数名 | 类型 | 说明 | 默认值 | 必须 | | --- | --- | --- | --- | --- | | -f， --framework | String | 项目使用的框架 , 不传则使用 Javascript 相关 Eslint 配置 | N/A | 否 | | -t， --typescript | Boolean | 项目是否使用了 Typescript , 为 true 则添加 Typescript 相关 Eslint 配置 | false | 否 | | -a， --alias | Boolean | 项目是否使用了 webpack alias | false | 否 | | -c， --cypress | Boolean | 项目是否使用了 Cypress | false | 否 |
IDE 配置
配置 VScode
- 安装
eslint插件 - 打开 vscode 的配置文件
setting.json,然后添加如下配置
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}- 重新启动 vscode
配置 WebStorm
打开设置面板
- windows: file -> settings
- mac: Preferences
找到 eslint 设置页
- search 'eslint'
- Languages & Frameworks -> JavaScript -> Code Quality Tools -> ESLint
打开 eslint 选择第二项： Automatic ESlint configuration
如果碰到
ESLint: Delete␍(prettier/prettier)的问题，可以是这尝试下面方案
$ git config --global core.autocrlf false
然后删掉本地的仓库，重新 git clone.常见问题 ⚠️⚠️⚠️
实验型功能
如果项目依赖了一些试验型的功能（装饰器，class-properties）时，需要手动安装对应的 babel 插件，并配置到 babel.config.json
/** babel.config.json */
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}文件别名配置
vscode 并不支持相对路径直接跳转，可以在项目根目录下创建 jsconfig.json
/** jsconfig.json */
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./*"]
}
}
}