chameleon 如何给CML项目设置eslint?

smdncfj3  于 2021-12-01  发布在  Java
关注(0)|答案(0)|浏览(206)

以下只提供一种用 eslint 校验CML项目的方案,开发者可以根据自己情况选择;

如何使用eslint校验本次提交

如何使用eslint规范CML项目

如何用eslint校验js文件

如何用eslint校验cml文件

如何看standard的具体的rules代表的含义

standard 具体的规则参考 node_modules/eslint-config-standard/eslintrc.json

eslint配置详细解释中文文档

如何只用eslint校验本次提交

由于项目的历史原因,之前的提交都没有进行代码的eslint,如果贸然的使用eslint对项目进行修复,那么存在一定的风险,那么如何既能规避这部分风险,又能通过渐进式的方案对项目代码进行lint呢?

答案就是 lint-staged

注意lint-staged requires at least version 8.12.0 of Node, please upgrade

lint-staged 要求 Node >= 8.12.0

它可以帮助我们仅仅对本次提交的代码进行校验,而不会对原来的代码进行全盘校验;

npm i eslint lint-staged husky -D

然后在项目的package.json 中修改

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  },
  "lint-staged": {
    "src/**/*.js": "eslint --fix"  
  },

注意 lint-staged 配置对象的key值是要校验的文件目录路径

此时我们在修改 .js 代码,那么就会通过eslint进行校验了;
接下来就需要配置eslint相关的规则

如何使用eslint规范CML项目

CML项目对于系统要求

node >= 8.10.0
npm >= 5.6.0

注意lint-staged requires at least version 8.12.0 of Node, please upgrade

lint-staged 要求 Node >= 8.12.0,所以如果想仅仅对当前提交对校验,那么需要 node版本 >= 8.12.0

eslint校验.js文件

我们使用standard标准下的eslint规范

npm i eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -D

在项目根目录新建 .eslintrc.js 文件,写入以下内容

module.exports = {
  root:true,//
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'standard',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    parser:"babel-eslint"
  },
  rules: {
  }
}

经过以上步骤就可以对项目中的每次新提交的 .js 文件进行校验了;

比如按照 standard 的标准某些规则不太喜欢,那么可以在 rules中覆盖设置,比如:

rules: {
    "semi":"off" //0
}

eslint校验 .cml 文件

npm i eslint-plugin-vue  babel-eslint -D

然后在项目中.eslintrc.js中增加配置

//继承 vue/base 的配置,源码可参考 eslint-plugin-vue/lib/configs/base.js
extends: [
  'plugin:vue/base',
  'standard',
],
//关闭 plugin:vue/base 中的这两个规则,因为有时候可能会导致模板中某些校验无法通过;
rules: {
    'vue/comment-directive': 'off',
    'vue/jsx-uses-vars': 'off'
  }

package.json 中增加在 lint-staged阶段增加对于 .cml 文件的校验

"lint-staged": {
    "src/**/*.{js,cml}": "eslint --fix"  
  },

eslint 规则的配置开发者可以根据eslint官方文档自定义校验规则。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题