DEV Community: Alexandre Le Corre

Utilisez Linux sur Windows grâce à VSCode

Alexandre Le Corre — Wed, 07 Sep 2022 21:47:07 +0000

Introduction

Dans cet article, nous allons voir comment utiliser Linux sur Windows sans machine virtuelle ni dual boot, avec une simple extension VSCode 😇

😳 Comment c'est possible ?

Windows est un système d'exploitation très largement critiqué, en bien ou en mal et à tord ou à raison par la communauté des développeurs.

Personnellement, je trouve que Windows 10 est le meilleur OS. Il permet de tout faire et il est très polyvalent. On peut aussi bien l'utiliser pour jouer que pour travailler.

Mais ce n'est pas le sujet de cet article 😅

Ici nous allons voir comment faire pour utiliser le terminal et tout l'environnement de Linux sans quitter Windows grâce à une simple extension. C'est possible grâce à la technologie WSL de Windows, l'acronyme de Windows subsystem for Linux.

Cette technologie, qui est en version 2 à l'heure où j'écris ces lignes, est super intéressante, elle vous permet d'exécuter un environnement Linux directement sur Windows, sans la surcharge d'une machine virtuelle traditionnelle ou d'une configuration en dual boot 😎

Lorsque vous installez une version de Linux sur Windows grâce à WSL, vous obtenez un environnement Linux complet. Il est isolé de Windows, l'interface utilisateur est le terminal et vous pouvez installer des outils, des langages et des compilateurs dans l'environnement Linux sans modifier ni perturber votre installation Windows.

La puissance de VSCode nous permet de centraliser tous ces outils géniaux et c'est un luxe en tant que développeur. Si ça vous intéresse, on passe à l'installation !

🔧 Installation

Installer le plugin

Rendez-vous sur la page de téléchargement du plugin sur le marketplace de Visual Studio, le plugin est fourni par Microsoft. Il est également possible de le télécharger depuis le logiciel directement, dans l'onglet "Extensions" (Ctrl+Shift+X) et rechercher "Remote WSL".

Un redémarrage de VS Code sera sans doute nécessaire.

Vous allez voir un nouvel item en bas à gauche de votre éditeur

Cet item peut vous montrer rapidement dans quel contexte VS Code s'exécute (local ou distant) et cliquer sur l'élément fera apparaître les commandes de l'extension.

Activer WSL sur Windows

WSL est une fonctionnalité facultative sur Windows 10. Vous pouvez l'activer via les fonctionnalités Windows.

Dans la barre de recherche Windows, tapez « fonctionnalités » pour ouvrir "Activer et désactiver les fonctionnalités Windows". Faites défiler vers le bas et cochez le sous-système Windows pour Linux.

Installer une distribution de Linux

Vous devrez installer les distributions Linux pour WSL à partir du Microsoft Store. Vous pouvez aller sur Microsoft Store ou rechercher une distribution Linux dans la barre de recherche Windows. Choisissez la distribution Linux que vous souhaitez installer (par exemple Ubuntu) et suivez les instructions.

Une fois l'installation terminée, cliquez sur "Lancer". Cela ouvrira un terminal Linux et terminera l'installation. Vous devrez créer un utilisateur et un mot de passe pour créer votre instance Linux. Vous utilisez maintenant Linux sur Windows 😲

Rendez-vous sur VSCode et c'est parti !

Ouvrez votre terminal et commencez à travailler sur votre nouvel environnement Linux !

À vous de jouer ! 🥳

Add a Tailwind Datepicker to your Vue 3 application

Alexandre Le Corre — Wed, 07 Sep 2022 21:28:42 +0000

Introduction

In this tutorial, I will show you how to add a datepicker widget in your Vue application.

We will use the vue-tailwind-datepicker plugin.

This will guide will start from the absolute beginning, we will install a Vue app then we will add the Tailwind CSS framework which is mandatory with vue-tailwind-datepicker.

Install VueJs

Let's begin by init the Vue projet:



npm init vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.



✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Once the project is created, follow the instructions to install dependencies and start the dev server:



cd <your-project-name>
npm install

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.



npm install -D tailwindcss postcss autoprefixer

Add the paths to all of your template files in your tailwind.config.js file.



// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives for each of Tailwind’s layers to your ./src/style.css file.



/* ./src/style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, ensure your CSS file is being imported in your ./src/main.js file:



// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Install tailwindcss/forms

vue-tailwind-datepicker uses tailwindcss/forms, it provides a basic reset for form styles that makes form elements easy to override with utilities.

Install the plugin from npm:



npm install -D @tailwindcss/forms

Then add the plugin to your tailwind.config.js file:



// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}

Install day.js

Vue Tailwind Datepicker uses Day.js under the hood, we must install this package by simply running this command:



npm i dayjs

Install vue-tailwind-datepicker

Now we will follow the official package documentation, you can find it here:

vue-tailwind-datepicker.com

Install the package by running this command:



npm install vue-tailwind-datepicker

You can setup the component globally by using it on your app initialization:



// main.js
import { createApp } from 'vue'
import App from '@/App.vue'
import VueTailwindDatepicker from 'vue-tailwind-datepicker'
// ...

const app = createApp(App)

app.use(VueTailwindDatepicker)
app.mount('#app')

We must now complete our tailwind configuration by setting up the the datepicker colors.

We must add this line: "./node_modules/vue-tailwind-datepicker/**/*.js" to the content section.

Theme of Vue Tailwind Datepicker is customizable, so you can customize your theme with any color you want, via Tailwind CSS configuration. And all will work well.

Light mode color system using custom color vtd-primary.

Dark mode color system using color palette vtd-secondary. Vue Tailwind Datepicker work it well with Tailwind CSS dark mode configuration.



// tailwind.config.js
const colors = require("tailwindcss/colors")

module.exports = {
  content: [
    "./index.html", 
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/vue-tailwind-datepicker/**/*.js"
  ],
  theme: {
    extend: {
      colors: {
        "vtd-primary": colors.sky, // Light mode Datepicker color
        "vtd-secondary": colors.gray, // Dark mode Datepicker color
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

Start your application

You can now start your application and configure the datepicker to fit your attempts:



npm run serve

You can find all the props here:

https://vue-tailwind-datepicker.com/props.html

vue-tailwind-datepicker is a good plugin which is well integrated with Vue/tailwind projects, it's powerful and you got a lot of props available to customize your datepicker.

Demo

You can find a demo on the main documentation

Also you can test vue-tailwind-datepicker on the official playground via Stackblitz

All good!

You can now use your datepicker on your app.

Please don't forget to add a start to the Github repo of the plugin:

https://github.com/elreco/vue-tailwind-datepicker

Thank you,
Alexandre.

Arrêtez d'utiliser Postman

Alexandre Le Corre — Wed, 07 Sep 2022 21:27:22 +0000

Thunder Client

Dans cet article, je vais te parler d'une extension très intéressante pour VS Code : Thunder Client. C'est en fait un client HTTP qui va te permettre de tester une API Rest ou GraphQL directement depuis ton IDE préféré 💖

💀 Pourquoi devrais-je arrêter d'utiliser Postman ?

Postman est un outil vraiment efficace et utilisé par la plupart des développeurs. Malgré ses nombreux avantages (tests automatisés, gestion des tests, gestion du cycle de vie des API entre autres), le client de bureau devient de plus en plus lent au fur et à mesure des mises à jours et l'interface utilisateur commence à être difficile à comprendre.

Je pense ne pas me tromper en vous donnant ce second argument pour vous faire télécharger cette extension : centraliser ses outils de travail, pour une meilleure efficacité.

C'est quand même bien pratique de tout avoir au même endroit non ? Ça nous évite de démarrer 15 applis pour commencer à travailler. Lancez VS Code et vous aurez votre éditeur et votre client HTTP. Et en tant que développeur, j'aime ce genre d'optimisation 😎

🔧 Installation

Il suffit simplement de te rendre sur la page de téléchargement du plugin sur le marketplace de Visual Studio. Il est également possible de le télécharger depuis le logiciel directement, dans l'onglet "Extensions" (Ctrl+Shift+X) et rechercher "Thunder Client".

Un redémarrage de VS Code sera sans doute nécessaire.

🤔 Comment ça marche ?

Si vous utilisiez Postman ou un autre client HTTP, vous ne serez pas perdu. Le client s'intègre de manière élégante et fluide à VS Code. Créez des nouvelles requêtes de type POST,GET,PATCH... rapidement ou créez des collections pour regrouper et ranger vos endpoints.

📂 Importer une collection depuis Postman

Et oui, c'est possible ! Pour faciliter votre transition de Postman vers Thunder Client, voici la marche à suivre :

Ouvrez Postman et sélectionnez la collection que vous voulez exporter

Sélectionnez Collection v2.1

Ouvrez l'onglet Thunder Client sur VS Code puis cliquez sur l'icône et "Importer". Importez le fichier json que vous avez exporté depuis Postman.

Vous pouvez maintenant jouer avec votre collection Postman sur VS Code !

À vous de jouer !