Forem: Tarun Mangukiya

13 VS Code Extensions for your productivity

Tarun Mangukiya — Mon, 20 Apr 2020 15:13:24 +0000

I am working on multiple frontend projects since last 2-3 years (mostly on VueJS) and during this period I've tried multiple VS Code extensions to improve my speed and productivity. Today I am happy to share some of my daily used extensions with you guys.

1. GitLens — Git supercharged

I hope this one is one of the most popular VS Code Extensions. It shows me multiple git statuses like, changed lines, who has changed particular line and when.

2. Git History

This extensions shows (obviously) git history beautifully. Along with that, it's quite helpful to navigate in previous versions of the files with a few clicks.

3. GitHub Pull Requests

This one's my favorite. This one helps me to create PR without visiting GitHub! Also, it adds GitHub in the sidebar along with Extensions, where we can see multiple things related to PRs, like, Waiting For My Review, Assigned To Me and more.

4. Change-case

As a developer, we deal with variables the most. This extension helps me to convert the PascalCase to kebab-case or snake_case to camelCase with a single click.

5. Lorem ipsum

This one's pretty useful when we're beginning to work on new projects or I am doing an event. We need Lorem Ipsum right?

6. vscode-random

In designing the UI, when it comes to adding name, email, date, country and more, I prefer them to look as natural as possible, Lorem Ipsum doesn't work there. During that time this extension comes to rescue. It allows us to place random name, email, uuid and more.

7. Code Spell Checker

I installed this extension few months back. This one helps me to correct the grammatical mistakes content of the website/app I am working in the code itself without Googling. And sometimes useful to correct variable names if I misspell them.

8. DotENV

I usually work on multiple projects and I need to deploy them to Netlify or Zeit. I manage multiple .envs and this one is quite useful to highlight .env files.

9. ESLint

Yep, it's for checking the linting of the code while working and fix it if necessary.

10. Prettier - Code formatter

This one's useful to reformat my code based on my Prettier config. Also I usually keep editor.formatOnSave: true, this Prettier formats the code automatically.

11. Prettify JSON

So, I used to google every time when I needed to format .json files and then found this <3. This one's pretty useful, just press cmd + P or Ctrl + P and Prettify JSON.

12. Path Intellisense

This extension allows me to customize the path auto-completion while working on the code. It also allows to add aliases like @ which we can point to the root directory of the project and configure the same in our webpack.config.js. I am mostly working on NuxtJS, so this help me to auto-complete using my aliases.

13. SCSS IntelliSense

Many times I am working on SCSS, and you know we've tons of variables to deal with. This one makes it really easy to auto-complete, navigate and even preview color variables. Saving a ton of time for me.

So that's it! Show some ❤️ if you liked reading the post and feel free to tell me which one's your favorite extension.

Creating my first React Package - React-unicons

Tarun Mangukiya — Sat, 20 Jul 2019 12:40:11 +0000

Hi guys,

Since long I wanted to work on and create package in React. I am mostly working in VueJS, thus this was a bit new experience for me.

Recently, we launched Unicons - an icon library containing 1000+ vector icons in unique line style as open source. And since then I wished to have package for React. Last Sunday, I was kinda free & thought to give it a try! And here I am writing this article.

How to

There were few ideas in my mind related to how I want to make it available. Some of them contains:

Easy to use for everyone.
Component based
One should be able to load only icons that they need, keeping bundle size as low as possible.

I wrote a script that converts the SVGs to React components. I used folder based approach like lodash to keep the bundle size smaller. Every component gets compiled into different React component file and gets imported to common index.js for those who want to use all the icons.

Here is a sample component of comment icon:

import React from 'react';
import PropTypes from 'prop-types';

const UilComment = (props) => {
  const { color, size, ...otherProps } = props
  return React.createElement('svg', {
    xmlns: 'http://www.w3.org/2000/svg',
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: color,
    ...otherProps
  }, React.createElement('path', {
    d: 'M12,2A10,10,0,0,0,2,12a9.89,9.89,0,0,0,2.26,6.33l-2,2a1,1,0,0,0-.21,1.09A1,1,0,0,0,3,22h9A10,10,0,0,0,12,2Zm0,18H5.41l.93-.93a1,1,0,0,0,0-1.41A8,8,0,1,1,12,20Z'
  }));
};

UilComment.propTypes = {
  color: PropTypes.string,
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

UilComment.defaultProps = {
  color: 'currentColor',
  size: '24',
};

export default UilComment;

The build script that I wrote looks something like this:

const path = require('path')
const fs = require('fs-plus')
const cheerio = require('cheerio')
const upperCamelCase = require('uppercamelcase')

const iconsComponentPath = path.join(process.cwd(), 'icons')
const iconsIndexPath = path.join(process.cwd(), 'index.js')
const uniconsConfig = require('@iconscout/unicons/icons.json')

// Clear Directories
fs.removeSync(iconsComponentPath)
fs.mkdirSync(iconsComponentPath)

const indexJs = []

uniconsConfig.forEach(icon => {
  const baseName = `uil-${icon.name}`
  const location = path.join(iconsComponentPath, `${baseName}.js`)
  const name = upperCamelCase(baseName)
  const svgFile = fs.readFileSync(path.resolve('node_modules/@iconscout/unicons', icon.svg), 'utf-8')

  let data = svgFile.replace(/<svg[^>]+>/gi, '').replace(/<\/svg>/gi, '')
  // Get Path Content from SVG
  const $ = cheerio.load(data, {
    xmlMode: true
  })
  const svgPath = $('path').attr('d')

  const template = `import React from 'react';
import PropTypes from 'prop-types';
const ${name} = (props) => {
  const { color, size, ...otherProps } = props
  return React.createElement('svg', {
    xmlns: 'http://www.w3.org/2000/svg',
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: color,
    ...otherProps
  }, React.createElement('path', {
    d: '${svgPath}'
  }));
};
${name}.propTypes = {
  color: PropTypes.string,
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
${name}.defaultProps = {
  color: 'currentColor',
  size: '24',
};
export default ${name};`

  fs.writeFileSync(location, template, 'utf-8')

  // Add it to index.js
  indexJs.push(`export { default as ${name} } from './icons/${baseName}'`)
})

fs.writeFileSync(iconsIndexPath, indexJs.join('\n'), 'utf-8')

console.log(`Generated ${uniconsConfig.length} icon components.`)

Earlier I tried to use webpack and it didn't work out properly as it compiled them into single index.js file.

Publishing it as npm package

I learned how to publish it as a npm package so that everyone can use it via simple npm install. I've published it at https://www.npmjs.com/package/@iconscout/react-unicons

Use

You can use these icon by simple installing
npm i -s @iconscout/react-unicons

and then import individual icons in your component.

import React from 'react';
import UilReact from '@iconscout/react-unicons/icons/uil-react'

const App = () => {
  return <UilReact size="140" color="#61DAFB" />
};

export default App;

I have also added props to customise color and size.

I would love to have suggestions from DEV.to community on how I can improve it. :)