diff --git a/general-setup.md b/general-setup.md new file mode 100644 index 0000000..4db83de --- /dev/null +++ b/general-setup.md @@ -0,0 +1,39 @@ +# General setup for JavaScript classes + +## 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). +- [Git](https://git-scm.com/): Source control management, also used by many tools +- A web browser, can be any of + - Firefox + - 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/) + - 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. +- 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 + +These will make your development experience better. + +#### Windows + +- Command prompt: [Cmder](https://cmder.net/) or [Hyper](https://hyper.is/) + +#### 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 diff --git a/vs-code-extensions.md b/vs-code-extensions.md new file mode 100644 index 0000000..5218940 --- /dev/null +++ b/vs-code-extensions.md @@ -0,0 +1,49 @@ +# Visual Studio Code Extensions + +A list of Visual Studio Code extensions we use in class. Not intended to be exhaustive. All of these are optional. + +## 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 +- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) + +## 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 +- [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. + +## React + +- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) Terrible name, good snippets. Be careful of imitation/fake/duplicate versions + +## Angular + +- [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) +- [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) + +## Vue.js + +- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) +- [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) + +## Themes + +- [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) + +## 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)