A Typescript - ESLint plugin to warn usage of deprecated React component props

ESLint-plugin-deprecated-props

Plugin to report usage of deprecated typescript interface properties in React components props. The keyword here is "usage", if the property is not used then the linter does not throw a warning.

VSCode integration

This plugin can also be used with VSCode if the Eslint extension is installed. See below for how to set up that.

Example

interface ComponentProps {
  /**
   * Some prop that is going to be removed in the future
   * @deprecated Use someOtherProp instead
   */
  someProp?: string;

  someOtherProp: string;
}

/**
 * Note that the @deprecated prop is used in the implementation
 * since it should still work. This does not throw a warning per se.
 */
const Component = ({ someProp, someOtherProp }: ComponentProps) => {
  const usedValue = someOtherProp != null ? someOtherProp : someProp;
  return <div>{someProp}</div>;
};

export const Test = () => {
  return (
    <React.Fragment>
      {/* Eslint will complain */}
      <Component someProp="" someOtherProp="" /> 
      {/* Eslint will NOT complain */}
      <Component someOtherProp="" />
    </React.Fragment>
  );
};

Note

This plugin was created specifically for a use case we needed at Drawbotics, and is as such not intended as a generic plugin to report deprecation. If the use case described below is not the same that you are encountering, you can check out any of the following plugins:

• eslint-plugin-deprecate
• eslint-plugin-import/no-deprecated
• eslint-plugin-deprecation

Installation

Make sure the project already has eslint installed. Note that this plugin works with @typescript-eslint/parser , so you need to have that installed as well.

$ npm install @drawbotics/eslint-plugin-deprecated-props --save-dev

Configuration

To configure this plugin to work properly, you need to set the following fields in your .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@drawbotics/eslint-plugin-deprecated-props'],
  parserOptions: {
    sourceType: 'module',
    project: 'tsconfig.json', // Path should point to tsconfig.json file, without leading `./` 
  },
  rules: {
    '@drawbotics/deprecated-props/deprecated-props': ['warn'],  // Or 'error'
  },
};

Note that this is simply the most minimal config for the plugin to work, you would normally already have other settings and rules in place for your project, but this is the bare minimum.

Testing

To run the integration tests simply run

$ npm run test

VSCode

Depending on your personal configuration, you can enable vscode to report deprecation usage through the plugin. If you already have the ESLint plugin installed and enabled, the deprecation rules should work automatically.

If you don't like to have the ESLint extension running in VSCode (e.g. because you already have the Typescript parser enabled) then you can do the following:

@drawbotics/eslint-plugin-deprecated-props

"eslint.validate": [
  "typescript",
  "typescriptreact"
],
"eslint.workingDirectories": [{ "mode": "auto" }],
"eslint.options": {
  "useEslintrc": false,
  "rules": {
    "@drawbotics/deprecated-props/deprecated-props": ["warn"],  // OR error
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@drawbotics/eslint-plugin-deprecated-props"],
  "parserOptions": {
    "sourceType": "module",
    "project": "tsconfig.json",
  },
},

This way you can have VSCode only report the deprecation warnings, and no other ESLint related rule warning. Note that if your project property in the .eslintrc config points to a tsconfig.json file which is not at the root of the project (e.g. project: settings/configs/tsconfig.json ), in the VSCode config you should mofidy the same field to point to simply tsconfig.json , since the VSCode extension will automatically find the right file.

Todo list

As mentioned above, this plugin was created for a very specific use case. If you would like to use it and/or contribute to make it better, feel free to submit a PR.