Wk 3 Project tech - Sophievanderburg/blok-tech GitHub Wiki
I think the color theme is to make you work space look nice. It also helps you to write code by giving certain parts of code a certain color.
For the color theme I chose the Dracula official theme from Dracula theme. I chose this theme because I liked the colours.
This theme also shows you when an HTML-element is not correct. So when you use a piece of the EJS syntax it will put a red line under the opening-tag of the EJS syntax. This way I can see where I put the JavaScript elements. I like this because I can find certain JavaScript parts more easily this way.
With the text editor settings you can adjust settings to your preferences. I only adjusted the font size, of the rest I thought the default was good.
"lint, or a linter, is a tool that analyses source code to flag programming errors, bugs, stylistic errors, and suspicious constructs."(Wikipedia). A linter also helps you keep a consistent code style. It helps you with finding syntax errors: this saves you a lot of time going over the code finding a problem like forgetting a semicolon.
ESLint, JSHint & JSLint came forward the most, so I researched them more than the rest
ESLint | JSHint | JSLint |
---|---|---|
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint | https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint | https://marketplace.visualstudio.com/items?itemName=ajhyndman.jslint |
8 million installs | 1.8 million installs | 136,000 installs |
configurable | configurable | not configurable |
Completely supports ES6 and React | Supports basic ES6 | No support for ES6 or React |
Flexible and extensible | Every rule is configurable | simplicity and speed |
I installed ESLint. For me it was either ESLint or JSHint, because JSLint is not configurable. After that I dit not really know how to choose, because they are both well reviewed. What made me make this decision was that JSHints only support basic ES6. Also, multiple resources said that ESLint is the best linter. And lastly, ESLint is also to most used linter. That is why I chose ESLint.
Formatting does not have anything to do with working code. You format your code to make it look nicer and also more readable. If you format you code, other developers will read your code more easily. This way your code is better to understand and better to work with.
Beautify, Prettier & JS refactor came forward the most, so I researched them more than the rest
Beautify | Prettier | JS Refactor |
---|---|---|
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify | https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode | https://marketplace.visualstudio.com/items?itemName=cmstead.jsrefactor |
6.3 million intsalls | 11.2 million installs | 210,000 installs |
Available as package in VS Code | Available as package in VS Code | Available as package in VS Code |
Customisable | Customisable | Customisable |
JavaScript, JSON, CSS, Sass and HTML | JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown and YAML |
JavaScript, Vue, HTML and Typescript |
I installed Prettier as my code formatter. Based on the fact Prettier has the most installs, it shows me that more people find this a nice formatter. Also, Prettier supports the most languages. This way the chances are smaller that I have to install an extra formatter in the future.
Text
I set the font-size bigger, because I thought it was too small when you opened it. I also set the line-height a bit higher. This makes it clearer for me.
Prompt
I adjusted my prompt, because I thought It was too long. First it said sophievanderburg@MacBook-Pro-van-Sophie ~ %
and now it says sophievanderburg ~ %
. I also added a bit of color to the prompt, so I can find it more easily.
Cursor
I made my cursor a vertical bar, because the block was very confusing for me. When I made a typo that I needed to fix, I did not know what would happen: Is this letter deleting or the letter in front of it? So this saves me a lot of confusion.
Colours
I adjusted some of the colours, because it looks more nice. I made the colours match the theme I use in VS Code. This makes my development environment feel nicer and more connected.
- Meghani, S. (2017, July 24). JavaScript Linting Tools Comparison. Codeburst. https://codeburst.io/javascript-linting-tools-comparison-ebcb4aa23c49
- Cruz Martinez, J. (2020, December 29). The best VS Code extensions for JavaScript developers for 2021. LiveCodeStream. https://livecodestream.dev/post/the-best-vs-code-extensions-for-javascript-developers-for-2021/
- Wanyoike, M. (2020, April 22). 10 Must-have VS Code Extensions for JavaScript Developers. Sitepoint. https://www.sitepoint.com/vs-code-extensions-javascript-developers/
- Fayock, C. (2019, October 9). What is linting and how can it save you time? FreeCodeCamp. https://www.freecodecamp.org/news/what-is-linting-and-how-can-it-save-you-time/
- Schäferhoff, N. (2019, July 17). Code Formatting and Code Comments – A Beginner’s Guide to Do It Right. Torquemag. https://torquemag.io/2019/07/code-formatting-guide/
- Elise, J. (2020, 8 juli). Customize the MacOS Terminal. Medium. https://medium.com/dev-genius/customize-the-macos-terminal-zsh-4cb387e4f447
- Simple Tricks to Improve the Terminal Appearance in Mac OS X. (2013, 5 februari). Osxdaily. https://osxdaily.com/2013/02/05/improve-terminal-appearance-mac-os-x/