Desarrollo web: herramientas imprescindibles

Configuraciones que como desarrolladores Web tenemos que realizar.

Instalaciones Recomendadas

Estas Instalaciones te ayudarán en tu productividad

Extensiones para Navegador

JSON Viewer Pro

Plugins para Instalar en VSCode

Listamos los plugins que vamos a utilizar a nuestros talleres

Theme

SynthWave ’84

Iconos

Material Icon Theme

Configuraciones adicionales para VSCode

Primero tenemos que abrir nuestro JSON de Configuraciones para nuestro VSCode, lo abrimos usando el siguiente atajo de teclado: Ctrl + Shift + P y buscamos: settings.json

Link Listado de Plugins Instalados

Cambiar la posición del Sidebar

{
    "workbench.sideBar.location": "right",
}

Formatear al Guardar

{
    "editor.formatOnSave": true,
}

Configurando Prettier

{
    "prettier.printWidth": 70,
    "prettier.tabWidth": 2,
    "reactSnippets.settings.prettierEnabled": true,
    "prettier.singleQuote": true,
    "prettier.useTabs": true,
    "prettier.useEditorConfig": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

Live Server Port

{
     "liveServer.settings.port": 5501,
}

Live SASS

{
    "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/",
        }
    ],
}

Configuración del Theme synthwave84

Establecemos el brillo en settings.json:

{
    "synthwave84.brightness": 0.45
}

Debido a que habilitar el brillo modifica los archivos principales, el código VS interpretará esto como que el núcleo está ‘corrompido’ y es posible que vea un mensaje de error al reiniciar su editor. Puede descartar este mensaje de forma segura o eliminarlo por completo con la extensión Fix VSCode Checksums .

Tras la instalación de ‘Fix VSCode Checksums’, abra la paleta de comandos y ejecute Fix Checksums: Apply. Deberá reiniciar completamente VSCode después de la ejecución; volver a abrir sin salir por completo podría no ser suficiente.

Snippets – Fragmentos de Usuario

Los fragmentos de código son pequeños bloques de código reutilizable que se pueden insertar en un archivo.

Otra opción que podemos usar con los snippets que más usamos a diario es con atajos de teclado.

Ctrl + P e ingresa «preferences»: «User Snippets» y elije el lenguaje que desee.

Snippets para HTML

"PHP Print": {
    "prefix": "php",
    "body": [""],
    "description": "Print php code"
}

Snippets para SASS

"Comment": {
    "prefix": "/**",
    "body": ["/*** $1 ***/"],
    "description": "Comentario en SCSS"
},
"Media Query minDis": {
    "prefix": "minDis",
    "body": ["@include minDisplay(){ \n\t$1\n}"],
    "description": "Media Query minDisplay"
},
"Media Query Tel": {
    "prefix": "mqTel",
    "body": ["@include telefono(){ \n\t$1\n}"],
    "description": "Media Query Telefono"
},
"Media Query Tablet": {
    "prefix": "mqTab",
    "body": ["@include tablet(){ \n\t$1\n}"],
    "description": "Media Query tablet"
},
"Media Query laptop": {
    "prefix": "mqLap",
    "body": ["@include laptop(){ \n\t$1\n}"],
    "description": "Media Query laptop"
},
"Media Query desktop": {
    "prefix": "mqDesk",
    "body": ["@include desktop(){ \n\t$1\n}"],
    "description": "Media Query desktop"
},
"Media Query fullDesktop": {
    "prefix": "mqFullDesk",
    "body": ["@include fullDesktop(){ \n\t$1\n}"],
    "description": "Media Query fullDesktop"
},
"Media Query fullHD": {
    "prefix": "mqFullHD",
    "body": ["@include fullHD(){ \n\t$1\n}"],
    "description": "Media Query fullHD"
}