Skip to content

Instantly share code, notes, and snippets.

@AlvinLaiPro

AlvinLaiPro/writing-eslint-rule.md

Forked from sindresorhus/writing-eslint-rule.md
Created May 1, 2019 14:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AlvinLaiPro/21afdb72a40ce9ecc95e35a90bac2724 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AlvinLaiPro/21afdb72a40ce9ecc95e35a90bac2724 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @sindresorhus sindresorhus revised this gist Nov 5, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions writing-eslint-rule.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,7 @@ Go ahead and play around with some code in [AST Explorer](http://astexplorer.net
    Here are some good articles on the subject (ignore the scaffolding parts):
    - https://insideops.wordpress.com/2015/12/08/creating-custom-rules-for-eslint/
    - https://medium.com/tumblbug-engineering/creating-an-eslint-plugin-87f1cb42767f
    - http://blog.cowchimp.com/writing-a-custom-eslint-rule-to-spot-undeclared-props/
    - https://www.sitepoint.com/understanding-asts-building-babel-plugin/ (For Babel plugins, but good AST intro)

    When you have some background knowledge, try cloning our repo and open any rule file and its and start modifying just to play around.
  2. @sindresorhus sindresorhus created this gist Oct 19, 2016.
    20 changes: 20 additions & 0 deletions writing-eslint-rule.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    # Gettings started writing a ESLint rule

    First, take a look at the [ESLint rule documentation](http://eslint.org/docs/developer-guide/working-with-rules). Just skim it for now. It's very long and boring. You can come back to it later.

    ESLint rules works on the [AST](https://en.m.wikipedia.org/wiki/Abstract_syntax_tree) (Abstract Syntax Tree) representation of the code. In short, this is a tree structure that describes the code in a very verbose form. ESLint walks this tree and rules can subscribe to be notified when it hits a specific node type, like a `Literal` type, which could be the `"hello"` part of `const welcome = "hello";`.

    Go ahead and play around with some code in [AST Explorer](http://astexplorer.net/) *(Make sure the parser is `espree`)*. It's a great tool!

    Here are some good articles on the subject (ignore the scaffolding parts):
    - https://insideops.wordpress.com/2015/12/08/creating-custom-rules-for-eslint/
    - https://medium.com/tumblbug-engineering/creating-an-eslint-plugin-87f1cb42767f
    - https://www.sitepoint.com/understanding-asts-building-babel-plugin/ (For Babel plugins, but good AST intro)

    When you have some background knowledge, try cloning our repo and open any rule file and its and start modifying just to play around.

    When you're ready to start working on a rule, take a look at previous rule addition for what's needed to add: https://github.com/sindresorhus/eslint-plugin-unicorn/commit/718578aadc696dbc506bce32cd8e5bec3fb12c3a and https://github.com/sindresorhus/eslint-plugin-unicorn/commit/f0249e0f0ed341765fa2a9fad50d4599a95f3661

    Happy to answer question you might have in https://gitter.im/sindresorhus/meta

    Have fun! :)