Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract
Syntax Trees 🌳 to lint
Before You Start
I've used this repo to teach about ASTs in various settings. I've branched the repo for each one of them. Reference those branches based on what you're following along with:
- Frontend Masters:
fem
To checkout that branch run: git checkout <branch name>. From there on you
should be good.
You may also want to check out the Changes section in the README below.
By coding along with us in this workshop you’ll:
- Learn what can be done with Abstract Syntax Trees.
- Explore what tools are available for learning about and developing with ASTs.
- Discover what ASTs are.
- Understand why and how to write custom ESLint rules
- Write custom Babel plugins
- Learn why and how to write a codemod with Babel
The workflow of this workshop is fairly simple and based on Make It Stick methodologies:
- Learn a few concepts via demos
- Apply the concepts via exercises
- Write down three core concepts you learned and provide feedback on the exercise (elaboration and reflection)
All of these must be available in your PATH. To verify things are set up
properly, you can run this:
git --version
node --version
yarn --version
If you have trouble with any of these, learn more about the PATH environment variable and how to fix it here for windows or mac/linux.
After you've made sure to have the correct things (and versions) installed, you should be able to just run a few commands to get set up:
git clone https://github.com/kentcdodds/asts-workshop.git
cd asts-workshop
yarn run setup --silent
node scripts/autofill-feedback-email.js YOUR_EMAIL@DOMAIN.COM
git commit -am "ready to go"
Replace
YOUR_EMAIL@DOMAIN.COMwith your email address
This may take a few minutes. If you get any errors, please read the error output and see whether there's any instructions to fix things and try again. If you're still getting errors or need any help at all, then please file an issue.
If this finishes without issues, great 👏! However, if you have problems, please file an issue on this repo here.
If you don't have yarn installed and don't want to use it for some reason, you
can use npm as well. Instead of yarn start setup, run
node ./scripts/install && npm start validate and enjoy waiting (and hopefully
things don't break for you). May be a good idea to still run
node ./scripts/verify to verify you have the right version of other things
too.
The workshop is set up to place the right exercise in the exercises directory
when you run a special script. This way you always know exactly where to go.
For example, to start the first ESLint exercise:
npm start exercise.eslint.0
You'll notice that this will create an exercises directory with the source
file and tests in it. Your job is to make that test pass! To run the tests, run:
npm start
Tip: You could run
npm startin a separate terminal window, and use another one to run thenpm start exercise...scripts
This workshop is intended to be grouped with a lecture, but if you're unable
to watch a recording or have a lecture, then you can feel free to run through
the workshop yourself. The solutions are all in the other/final directory
if you get stuck. Good luck! 🎉 To get a primer on ASTs, you may find this
talk recording helpful: ASTs for Beginners
If you have any questions, let me know.
If you want to edit/update anything in the exercises, please see (and follow) the contributing guidelines!
If you use this workshop, please make a Pull Request this README with a link to your event.
- Kent C. Dodds at Frontend Masters (in April 2017)
The community and tools move fast. Here's a list of changes since I first gave this workshop:
- babel-plugin-tester was released and is a fantastic way to test your plugins
Thanks goes to these wonderful people (emoji key):
 Kent C. Dodds 💻 📖 🚇 |
 João Marques 🐛 |
 Mircea Staicu 💻 |
 Stanimira Vlaeva 💻 |
 Justin Dorfman 🔍 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT