The latest articles on Forem by Jannatin Naim (@jannatinnaim). https://forem.com/jannatinnaim https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F746302%2Fe6ec4c96-8f7c-40f4-a4c6-c3451a52e15b.png https://forem.com/jannatinnaim en Jannatin Naim Fri, 15 Jul 2022 22:43:40 +0000 https://forem.com/jannatinnaim/vscode-extensions-you-should-have-41m https://forem.com/jannatinnaim/vscode-extensions-you-should-have-41m <p>Extensions are a key component of VSCode. They can add so much functionality to this seemingly simple code editor. Here's an exhaustive list of extension that I use in my day to day workflow in VSCode.</p> <ul> <li>Python <a href="https://marketplace.visualstudio.com/items?itemName=ms-python.python">Download</a> </li> </ul> <p>Get Python language support with linting, debugging, running tests and lots more.</p> <ul> <li>Prettier - Code Formatter <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Download</a> </li> </ul> <p>Format your JavaScript code according to an opinionated standard or your own.</p> <ul> <li>ESLint <a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">Download</a> </li> </ul> <p>Lint your code to follow a certain code style.</p> <ul> <li>IntelliCode <a href="https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode">Download</a> </li> </ul> <p>Get intelligent suggestions (not just word auto completion) based on your code.</p> <ul> <li>GitLens <a href="https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens">Download</a> </li> </ul> <p>Interact with git from VSCode through a powerful UI.</p> <ul> <li>Code Run <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner">Download</a> </li> </ul> <p>Run any script you want.</p> <ul> <li>Material Icon Theme <a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme">Download</a> </li> </ul> <p>Good looking icon theme.</p> <ul> <li>Live Share <a href="https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare">Download</a> </li> </ul> <p>Collaborate with multiple people on the same file.</p> <ul> <li>Path Intellisense <a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">Download</a> </li> </ul> <p>Autocomplete paths in your files.</p> <ul> <li>GitHub Pull Requests and Issues <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github">Download</a> </li> </ul> <p>Manage GitHub issues and pull requests directly from VSCode.</p> <ul> <li>One Dark Pro <a href="https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme">Download</a> </li> </ul> <p>Best color scheme ever made. (#controversial)</p> <ul> <li>ES7+ React/Redux/React-Native snippets <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets">Download</a> </li> </ul> <p>Useful snippets if you're using React.</p> <ul> <li>EditorConfig <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">Download</a> </li> </ul> <p>Standardized editor configuration.</p> <ul> <li>Code Spell Checker <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker">Download</a> </li> </ul> <p>Never make a spelling mistake ever again.</p> <ul> <li>markdownlint <a href="https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint">Download</a> </li> </ul> <p>Lint markdown files to follow a certain standard.</p> <ul> <li>Better Comments <a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments">Download</a> </li> </ul> <p>Colorful comments to easily navigate around important parts of the code.</p> <ul> <li>CSS Peek <a href="https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek">Download</a> </li> </ul> <p>Go to definition for CSS.</p> <ul> <li>Git Graph <a href="https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph">Download</a> </li> </ul> <p>Git log... but cooler.</p> <ul> <li>DotEnv <a href="https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv">Download</a> </li> </ul> <p>Highlight dotenv files.</p> <ul> <li>Quokka.js <a href="https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode">Download</a> </li> </ul> <p>Prototype your JavaScript code.</p> <ul> <li>Peackcock <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock">Download</a> </li> </ul> <p>Distinguish between multiple VSCode instances.</p> <ul> <li>gitignore <a href="https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore">Download</a> </li> </ul> <p>Generate gitignore template.</p> <ul> <li>Version Lens <a href="https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens">Download</a> </li> </ul> <p>Manage package versions.</p> <ul> <li>Image Preview <a href="https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview">Download</a> </li> </ul> <p>Preview images in the gutter for quick reference.</p> <ul> <li>Error Lens <a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens">Download</a> </li> </ul> <p>Why have tiny squiggly lines when you can have <strong>chungus</strong> line highlights.</p> <ul> <li>SCSS IntelliSense <a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss">Download</a> </li> </ul> <p>Autocompletion for SCSS.</p> <ul> <li>Microsoft Edge Tools for VS Code <a href="https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools">Download</a> </li> </ul> <p>Suggest best practices for web development and integrate with Microsoft Edge browser.</p> <ul> <li>Formatting Toggle <a href="https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle">Download</a> </li> </ul> <p>Toggle formatting files.</p> <ul> <li>GitHub Repositories <a href="https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub">Download</a> </li> </ul> <p>Browse remote GitHub repositories without cloning them.</p> <ul> <li>GitHub Markdown Preview <a href="https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview">Download</a> </li> </ul> <p>Have the same markdown previewer as GitHub.</p> <ul> <li>WakaTime <a href="https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime">Download</a> </li> </ul> <p>Track your coding time.</p> <ul> <li>Sort Lines <a href="https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines">Download</a> </li> </ul> <p>Sort lines by any order.</p> <ul> <li>Live Preview <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server">Download</a> </li> </ul> <p>Preview your HTML files inside VSCode.</p> <ul> <li>Code Snap <a href="https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap">Download</a> </li> </ul> <p>Take cool screenshots of your code to share around.</p> <ul> <li>Lorem ipsum <a href="https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum">Download</a> </li> </ul> <p>Generate random lorem ipsum text for any file.</p> <ul> <li>Colorize <a href="https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize">Download</a> </li> </ul> <p>Highlight CSS colors.</p> <ul> <li>Fluent Icons <a href="https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons">Download</a> </li> </ul> <p>Cleaner app icons.</p> <ul> <li>:emojisense: <a href="https://marketplace.visualstudio.com/items?itemName=bierner.emojisense">Download</a> </li> </ul> <p>Autocompletion for markdown emojis.</p> <ul> <li>Relative Path <a href="https://marketplace.visualstudio.com/items?itemName=jakob101.RelativePath">Download</a> </li> </ul> <p>Get relative path to any file in the project.</p> <ul> <li>.ENV Switcher <a href="https://marketplace.visualstudio.com/items?itemName=EcksDy.env-switcher">Download</a> </li> </ul> <p>Switch between .env files.</p> <ul> <li>audio-preview <a href="https://marketplace.visualstudio.com/items?itemName=sukumo28.wav-preview">Download</a> </li> </ul> <p>Preview audio files.</p> <ul> <li>Choose A License <a href="https://marketplace.visualstudio.com/items?itemName=ultram4rine.vscode-choosealicense">Download</a> </li> </ul> <p>Generate a license file.</p> <ul> <li>Discord Rich Presence <a href="https://marketplace.visualstudio.com/items?itemName=LeonardSSH.vscord">Download</a> </li> </ul> <p>Show off to your friends what you're working on.</p> <ul> <li>Draw.io Integration <a href="https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio">Download</a> </li> </ul> <p>View draw.io files inside VSCode.</p> <ul> <li>Gif Player <a href="https://marketplace.visualstudio.com/items?itemName=bierner.gif-player">Download</a> </li> </ul> <p>Preview GIF files.</p> <ul> <li>Numbered Bookmarks <a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.numbered-bookmarks">Download</a> </li> </ul> <p>Put bookmarks throughout your code.</p> <ul> <li>SCSS Everywhere <a href="https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion">Download</a> </li> </ul> <p>Autocompletion for CSS classes.</p> <ul> <li>Thunder Client <a href="https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client">Download</a> </li> </ul> <p>Make API requests from VSCode.</p> <ul> <li>Todo Tree <a href="https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree">Download</a> </li> </ul> <p>All your TODOs in one place.</p> <ul> <li>vscode-spotify <a href="https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify">Download</a> </li> </ul> <p>Control Spotify from VSCode.</p> <p>PS: If you speak Bangla you can also check out this <a href="https://youtu.be/J1_rYxfUxPI">YouTube video</a> showcasing these settings.</p> vscode extensions jannatinnaim Jannatin Naim Fri, 15 Jul 2022 22:21:16 +0000 https://forem.com/jannatinnaim/vscode-settings-you-should-use-3d9o https://forem.com/jannatinnaim/vscode-settings-you-should-use-3d9o <p>Get started with the base settings for using VSCode. It seems like a simple text editor at first and all the noise around "extensions" really drive you away from just how much the editor itself is capable of. Here are some settings to help you use VSCode more effectively in your day to day workflow.</p> <h2> Text Editor </h2> <ul> <li>Bracket Pair Colorization - On</li> <li>Guides <ul> <li>Bracket Pairs - On</li> <li>Bracket Pairs Horizontal - On</li> <li>Highlight Active Bracket Pair - On</li> </ul> </li> <li>Line Height - 1.25</li> <li>Linked Editing</li> <li>Rulers - 80, 90, 100, 120</li> <li>Tab Size - 2</li> </ul> <h3> Cursor </h3> <ul> <li>Cursor Blinking - Solid</li> </ul> <h3> Font </h3> <ul> <li>Font Family - JetBrainsMono Nerd Font, monospace</li> <li>Font Ligatures - On</li> <li>Font Size - 16</li> </ul> <h3> Formatting </h3> <ul> <li>Format On Paste - On</li> <li>Format On Save - On</li> <li>Format On Type - On</li> </ul> <h3> Minimap </h3> <ul> <li>Enabled - Off</li> </ul> <h3> Suggestions </h3> <ul> <li>Inline Suggest - On</li> </ul> <h3> Files </h3> <ul> <li>Auto Guess Encoding - On</li> <li>Auto Save - On Window Change</li> <li>Insert Final Newline - On</li> <li>Trim Final Newlines - On</li> <li>Trim Trailing Whitespace</li> </ul> <h2> Workbench </h2> <ul> <li>Command Palette History - 0</li> <li>Layout Control Enabled - Off</li> <li>Startup Editor - None</li> </ul> <h3> Appearance </h3> <ul> <li>Tips - Off</li> </ul> <h3> Editor Management </h3> <ul> <li>Highlight Modified Tabs</li> <li>Untitled Hint - Hidden</li> </ul> <h3> Settings Editor </h3> <ul> <li>Editor - JSON</li> </ul> <h2> Window </h2> <ul> <li>Dialog Style - Custom</li> <li>Title Bar Style - custom</li> </ul> <h2> Features </h2> <h3> Search </h3> <ul> <li>Show Line Numbers - On</li> <li>Smart Case - On</li> </ul> <h3> Debug </h3> <ul> <li>Console <ul> <li>Font Size - 16</li> </ul> </li> </ul> <h3> Terminal </h3> <ul> <li>Integrated <ul> <li>Cursor Blinking - Off</li> <li>Enable Persistent Sessions - Off</li> <li>Font Size - 16</li> <li>Mac Option Is Meta - On</li> <li>Shell Integration - On</li> </ul> </li> </ul> <h2> Application </h2> <h3> Telemetry </h3> <ul> <li>Telemetry Level - Off</li> </ul> <h2> Security </h2> <h3> Workspace </h3> <ul> <li>Trust <ul> <li>Untrusted Files - Open</li> </ul> </li> </ul> <h2> Extensions </h2> <h3> CSS Language Features </h3> <ul> <li>CSS <ul> <li>Completion</li> <li>Complete Property With Semicolon - Off</li> <li>Format</li> <li>Space Around Selector Separator - Off</li> </ul> </li> <li>SCSS <ul> <li>Completion</li> <li>Complete Property With Semicolon - Off</li> <li>Format</li> <li>Space Around Selector Separator - Off</li> </ul> </li> </ul> <h3> Git </h3> <ul> <li>AutoFetch - All</li> <li>Confirm Sync - Off</li> <li>Enable Smart Commit - On</li> </ul> <p>You can get the <a href="https://github.com/JannatinNaim/YouTube/blob/main/Videos/1CtLETYekPU/data/settings.json">JSON file from here.</a></p> <p>PS: If you speak Bangla you can also check out this <a href="https://youtu.be/1CtLETYekPU">YouTube video</a> showcasing these settings.</p> vscode settings jannatinnaim