CD FE eslint config
抽取相关配置,形成满足特定规范的配置文件
配置规则文件
本库里面目前针对使用不同技术栈的工程,提供了不同的配置文件。但其核心的编码规范和代码格式是一致的。
- vue
该配置文件,针对 Vue 2.0+ 的传统项目
module.exports = {
root: true,
extends: ['@runningsnail/cdfe/vue'],
};
- vue-ts 该配置文件,针对 vue 2.0+ 以及 typescript 的项目使用
module.exports = {
root: true,
extends: ['@runningsnail/cdfe/vue-ts'],
};
- weixin 该配置文件,针对原生微信小程序项目使用
module.exports = {
root: true,
extends: ['@runningsnail/cdfe/weixin-mini-program'],
};
如何使用
安装依赖
该配置文件基于 eslint
库,以及相关插件。本库只包含配置项,因此需要自己安装以下的库和插件。
// 使用 yarn 安装
yarn add eslint eslint-plugin-prettier eslint-plugin-vue --save-dev
// 使用 npm 安装
npm install eslint eslint-plugin-prettier eslint-plugin-vue --save-dev
在工程中加入相关配置文件
在工程根目录下创建以下几个文件:
- .eslintrc.js
该文件是 eslint 的配置文件,在该文件下可以写入以下内容:
module.exports = {
root: true,
extends: ['@runningsnail/cdfe/vue'], // 注意这里是传统vue项目使用的配置文件。根据不同的项目使用不同的配置文件
};
- .prettierrc.js
该文件为 prettier
的配置文件,可以方便我们格式化代码,在该文件下可以写入以下内容:
module.exports = require('@runningsnail/eslint-config-cdfe/prettier');
vscode 安装相关插件
在vscode
中安装以下插件:
- Code Spell Checker
该插件是单词拼写检测插件
- Eslint
本地 Eslint 插件,可以在编写代码时,实时提示不符合预设规则的代码。
- Prettier
本地 Prettier 插件, 可以帮助代码格式化。
至此,工程已经接入本代码规范和代码格式