Linting configuration and setup updates

general-setup.md

@@ -1,39 +1,34 @@
 # General setup for JavaScript classes
 
-## Software
+## Required Software
 
-### Required
-
-- [Node.js](https://nodejs.org): the engine for most JavaScript classes. You should download either the LTS (v12.x at the moment) or the Current (v14.x) version. Class usually supports LTS - 1 (v10.x in this case).
+- [Node.js](https://nodejs.org): the engine for most JavaScript classes. You should download either the LTS (v14.x at the moment) or the Current (v15.x) version. Class usually supports LTS - 1 (v12.x in this case).
 - [Git](https://git-scm.com/): Source control management, also used by many tools
 - A web browser, can be any of
-  - Firefox
-  - Chrome
+  - [Firefox](https://www.mozilla.org/en-US/firefox/browsers/)
+  - [Chrome](https://www.google.com/chrome/)
   - [Edge](https://www.microsoft.com/en-us/edge)
   - Other browsers (Internet Explorer, Safari, Brave, Opera, etc. may work in class but are not officially supported)
 - An editor
   - [Visual Studio Code](https://code.visualstudio.com/) is strongly preferred, but others are available
     - Check out some [recommended extensions](vs-code-extensions.md) for VS Code.
-  - [WebStorm](https://www.jetbrains.com/webstorm/) or IntelliJ, also by JetBrains
-  - [Adobe Brackets](http://brackets.io/)
+  - [WebStorm](https://www.jetbrains.com/webstorm/) or [IntelliJ](https://www.jetbrains.com/idea/), also by JetBrains
   - SublimeText, Emacs, Vi(m) if you like configuring your editor yourself
   - Notepad++, Atom, TextMate, etc. if you can't install any of the above
   - Eclipse is not a viable choice. JavaScript support on Eclipse is a disaster.
+  - Notepad is not a viable choice. It does not have enough features for you to be a productive developer
 - Class source code. You should have received a link to the class source code. You can always try the [Speeding Planet repository](https://github.com/speedingplanet) to see if it's there.
 
-### Optional
+## Optional Software
 
 These will make your development experience better.
 
-#### Windows
+### Windows
 
 - Command prompt: [Cmder](https://cmder.net/) or [Hyper](https://hyper.is/)
 
-#### MacOS
+### MacOS
 
 - Terminal: [iTerm2](https://www.iterm2.com/) or [Hyper](https://hyper.is/)
 - Shell: [Fish](https://fishshell.com/) or [zsh](http://zsh.sourceforge.net/), though bash is fine
 
-### Class-specific setups
-
-TBD

linting-configuration.md

@@ -0,0 +1,80 @@
+# Linting configuration
+
+This is the linting configuration I use in class. It is a combination of changes to Visual Studio Code, ESLint, and Prettier. Coding style is important, of course. In class, there are some style choices which I think are helpful educationally which are not available through VS Code, ESLint, or Prettier alone. My general experience is that Prettier (or Standard!) is fine for code style outside of an educational or training context. ESLint is a very good linter. And VS Code is great for writing JavaScript and TypeScript. Thanks to the tools below, I wrestled the three of them into working together in a way that helps me. 
+
+## Plugins
+
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 
+- [Format Code Action](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action): This is what makes everything work.
+
+## Links
+
+Most of the work in this area was done thanks to Rohit Gohri. 
+
+- [Blog post](https://rohit.page/blog/posts/how-to-get-prettier-eslint-play-nicely-with-vscode) on getting ESLint and Prettier to work together
+- [Original post](https://github.com/prettier/prettier-vscode/issues/1277#issuecomment-621175180), where the problem and solution are discussed
+- Babel config thanks to this Stack Overflow answer: https://stackoverflow.com/a/66061810
+- My [repo](https://github.com/johnpaxton/javascript-config) with the ESLint, Babel, and package lists
+
+## Configuration
+
+Install the plugins above. Below, you'll find the individual configurations for Visual Studio Code, Babel, Prettier, and ESLint
+
+### Visual Studio Code
+Add the following to your `settings.json` file in VS Code: 
+
+```json
+"editor.formatOnSave": true,
+"editor.defaultFormatter": "esbenp.prettier-vscode",
+"editor.codeActionsOnSave": {
+  "source.fixAll.eslint": true
+}
+```
+
+### Babel
+If you use any JavaScript features that are **not yet** ECMAScript standards, you will need Babel. Install the following:
+  - @babel/preset-env
+  - @babel/eslint-parser
+  - @babel/eslint-plugin
+  - @babel/plugin-syntax-class-properties
+
+You will also need a .babelrc file. This one is in the .js format
+```javascript
+module.exports = function( api ) {
+  api.cache( true );
+
+  const presets = [ '@babel/env' ];
+  const plugins = [ '@babel/plugin-syntax-class-properties' ];
+
+  return {
+    presets,
+    plugins,
+  };
+};
+```
+
+### ESLint
+
+```javascript
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+
+  // You don't need these if you're not using Babel
+  plugins: [ '@babel' ],
+  parser: '@babel/eslint-parser',
+
+  extends: [ /* whatever */ ],
+  rules: { /* whatever */ },
+  ignorePatterns: [ 'node_modules' ],
+};
+```
+
+### Prettier
+
+Use the .prettierrc file format of your choice. Configure Prettier as usual.
+

vs-code-extensions.md

@@ -5,21 +5,20 @@ A list of Visual Studio Code extensions we use in class. Not intended to be exha
 ## General
 
 - [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
-- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
 - [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
-- [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) Colors VS Code according to your project (red for Angular, blue for React, etc.)
-- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) Makes reading code much easier. There is a version 2, but some people have trouble with it.
-- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) Fancy, if overly complicated, git interface
+- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) Makes reading code much easier. Version 1 or 2 should work fine.
 - [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)
+- [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) Fancy, if overly complicated, git interface
 
 ## JavaScript
 
 - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) code style enforcer (and also formatter)
 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) code formatter
+  - To configure these two together, look at [this doc](linting-configuration.md).
 - [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
 - [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)
 - [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) Run npm scripts inside the editor
-- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) Plugs into the Jest testing library. Has some issues, but tends to be overall enjoyable.
+- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) Plugs into the Jest testing library. 
 
 ## React
 
@@ -39,11 +38,8 @@ A list of Visual Studio Code extensions we use in class. Not intended to be exha
 
 - [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) I use the vivid version in class
 - [Overnight](https://marketplace.visualstudio.com/items?itemName=cev.overnight)
+- [LubnaDev-Theme](https://marketplace.visualstudio.com/items?itemName=lubnadev.lubnadev-theme)
 
-## Configuration
-
-I keep all of my Visual Studio Code configuration in Gists.
-
-- Development [configuration](https://gist.github.com/johnpaxton/9c1b860817874d527cc2b388a9a5bc40)
-- Class display [configuration](https://gist.github.com/johnpaxton/aa47f51e25f3319c7ff8b2f941a32b6a)
-- [Keybindings](https://gist.github.com/johnpaxton/c4a8621bd38828afe9a265f0915f6edd)
+## Decoration
+- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
+- [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) Colors VS Code according to your project (red for Angular, blue for React, etc.)