Readable Code Workshop

This is a workshop for developers who want to write readable code consistently.

We'll cover 4 tools:

1. ESLint
2. Flake8
3. markdownlint
4. Gitlab CI

Setup

1. Install this software
   1. NodeJS version 12+
   2. Python version 3.7+
   3. Visual Studio Code
2. Install these Visual Studio Code plugins
   1. Python
   2. EditorConfig
   3. ESLint
   4. markdownlint
   5. Code Spell Checker
3. Watch these videos
   1. ESLint: https://youtu.be/qhuFviJn-es (9m)
   2. Flake8: https://youtu.be/TDUf93vqq3g (6m)
   3. Markdownlint: https://youtu.be/TDUf93vqq3g (5m)
   4. Gitlab CI: https://youtu.be/Jav4vbUrqII (8m)

Exercise 1

In this exercise, you'll learn how to fix errors in your code.

• Fork this repo into your namespace and clone your fork (Video)
• Run npm install
• Open these files in Visual Studio Code and fix any issues in the "Problems" panel (Video)
  • index.html.
  • README.md. Try Ctrl+Shift+P: Fix all supported markdown lint violations in the document (markdownlint)
  • script.js. Try Ctrl+Shift+P: ESLint: Fix all auto-fixable problems
  • main.py. Try Ctrl+Shift+P: Format Document (uses autopep8)
• Run the commands in .gitlab-ci.yml locally and verify the fixes (Video)
• Commit and push the fixes to your fork. Check on Gitlab that CI/CD > Pipelines passes without errors
• Create an issue titled Exercise 1 submission. Add a link to your repo and submit the issue.

Troubleshooting

• Is Git replacing LF with CRLF on Windows?
• Are Python lint errors not visible on VS Code?
• Does VS Code report import 'pandas' could not be resolved?

Exercise 2

In this exercise, you'll set up a repo for teams to write consistent readable code.

• Create .editorconfig
• Create .eslintrc.js with the HTML plugin
• Create .flake8 or setup.ini
• Create .gitlab-ci.yml

Video