@manifoldxyz/lint-configs

@manifoldxyz/lint-configs

Shareable configurations to keep our Typescript code syntax/format consistent across all of our repositories.

Installation In External Project

1. Install the package:

yarn add -D @manifoldxyz/lint-configs

2. Install the peer dependencies associated with the package:

You can just copy and paste the peerDependencies from the package.json into your devDependencies of your repo.

You can also use CLI:

(
export PKG=@manifoldxyz/lint-configs;
npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add -D "$PKG"
)

3. Configure the appropriate config file for your linter:

eslint

• Node

  • Our default node lint config can be extended via @manifoldxyz.

    // .eslintrc.js
    module.exports = {
      extends: ["@manifoldxyz"],
    };
    

• Vue 3

  • Adding lint to vue app? Use the vue config @manifoldxyz/eslint-config/vue3

    // .eslintrc.js
    module.exports = {
      extends: ["@manifoldxyz/eslint-config/vue3"],
    };
    

    ⚠️ If you run into a CLIEngine not found error, you may need to use eslint@7 (whereas we use eslint@8 otherwise)

  • For vue2 use @manifoldxyz/eslint-config/vue

prettier

// .prettierrc.js
module.exports = require("@manifoldxyz/lint-configs/prettier");

4. You can then setup scripts in your package json like the below:

  // package.json
  ...
  "scripts": {
    ...
    "lint": "eslint .",
    "format": "prettier . --write && eslint . --fix"
    ...
  }
  ...

StyleLint

// .stylelintrc.js
module.exports = require('@manifoldxyz/lint-configs/stylelint');

// for vue
module.exports = require('@manifoldxyz/lint-configs/stylelintvue');

// you could choose to modify and extend it like this as instead
const manifoldVueConfig = require('@manifoldxyz/lint-configs/stylelintvue');
module.exports = {
  ...manifoldVueConfig,
  rules: {
    ...manifoldVueConfig.rules,
    'declaration-property-value-no-unknown': null,
  },
};

4. You can then setup scripts in your package json like the below:

  // package.json
  ...
  "scripts": {
    ...
    "lint:css": "stylelint 'src/**/*.{vue,css,scss}'",
    "lint:css:fix": "stylelint 'src/**/*.{vue,css,scss}' --fix"
    ...
  }
  ...

Solhint

// .solhintrc.js
module.exports = require('@manifoldxyz/lint-configs/solhint');

4. You can then setup scripts in your package json like the below:

  // package.json
  ...
  "scripts": {
    ...
    "lint:sol": "solhint 'contracts/*.sol'",
    "lint:sol:fix": "solhint 'contracts/.sol' --fix"
    ...
  }
  ...

Troubleshooting

If you have issues relating Yarn 1 finding the wrong versions of strip-ansi, stylish, or string-width give this a shot in your package.json, it might patch your issue:

"resolutions": {
  "strip-ansi": "^6.0.1",
  "string-width": "^4.0.0"
}

Testing

When making updates to any of the configs or their packages, you should test that the Linter is working as expected. To do this, head to our package.json and run the corresponding test: script.

For example if you make changes to eslint, you should run test:eslint to ensure that the linter is working as expected.