markdown [VS代码注释]

Posted 2021-05-06

# VS Code Notes

## Extensions
### Installed
#### Must Have
- [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [jshint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
- [open in browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser)


#### Useful
- [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)
- [Code Outline](https://marketplace.visualstudio.com/items?itemName=patrys.vscode-code-outline)
- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
- [Powershell](https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell)
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)
- [REST client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
- [Icon-Fonts](https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts)
- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

#### Evaluating
- [Gist Generator](https://marketplace.visualstudio.com/items?itemName=ramsaylanier.gist-generator)
- [Todo+](https://github.com/fabiospampinato/vscode-todo-plus)
- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
- [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)
- [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
- [Actionscript & MXML](https://marketplace.visualstudio.com/items?itemName=bowlerhatllc.vscode-nextgenas)  

### Need to install
- [Maven for Java](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-maven)
- [Document this](https://marketplace.visualstudio.com/items?itemName=joelday.docthis)

### To try
- [TODO Parser](http://kantlove.github.io/vscode-todo-parser/)
- [Gist Extension](https://marketplace.visualstudio.com/items?itemName=kenhowardpdx.vscode-gist)
- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
- [Sass](https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented)
- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)
- [PlantUML](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)
- [HTMLHint](https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint)
- [Flow Language Support](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode)
- [vscode-flow-ide](https://marketplace.visualstudio.com/items?itemName=gcazaciuc.vscode-flow-ide)
- [GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)
- [Node.js Modules Intellisense](https://marketplace.visualstudio.com/items?itemName=leizongmin.node-module-intellisense)
- [JS Refactor](https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor)
- [HTML Class Suggestions](https://marketplace.visualstudio.com/items?itemName=AndersEAndersen.html-class-suggestions)
- [vscode-pdf](https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf)
- [webpack](https://marketplace.visualstudio.com/items?itemName=jeremyrajan.webpack)
- [AutoHotkey](https://marketplace.visualstudio.com/items?itemName=slevesque.vscode-autohotkey)



### Avoid

## Notes
### EditorConfig vs Prettier vs ESLint
[See this](https://stackoverflow.com/questions/48363647/editorconfig-vs-eslint-vs-prettier-is-it-worthwhile-to-use-them-all)  
Combination of all three works best as they all have their own uses

**EditorConfig:** This helps your editor produce code that looks like your style guide as you go. While this isn't strictly necessary in order to achieve your goals, it's nice if you're always looking at code that follows the same coding styles. Otherwise if you don't have EditorConfig, as you're typing your editor will auto-format differently to the rest of the code base, which is confusing. Of course if you've set up prettier it'll fix it before it goes into your code base, but still, why would you want to look at it in one format while you're writing it and then have it switch when you go to commit? Might as well be consistent.

**Prettier:** Automatically formats your code. I like to set it up to do this when I stage my files for a commit, so that it's physically impossible for me to commit code that doesn't match my style guide.

**ESLint:** So why would you want a linter too? Because ESLint does more than just style. It picks up when you declare variables you don't use, or reference things that aren't defined, amongst a few other niceties. So while its role diminishes somewhat compared to the days before prettier, it's still useful to have in a project to catch the other errors.