Wk 3 Project tech - Sophievanderburg/blok-tech GitHub Wiki

📚 Desk research: Developing environment

🎨 Text Editors Themes

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.

Picture of wireframe Picture of wireframe

⚙️ Text Editor Settings

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.

🔌 Text Editors Extensions

Linter

"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.

Formatter

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.

🔣 CLI

Picture of new terminal

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.

📚 Used sources

⚠️ **GitHub.com Fallback** ⚠️