Creaci贸n del proyecto

2/21
Recursos

Aportes 16

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Si al igual que a mi Eslint te esta volviendo loco 馃く
s贸lo crea un archivo llamado .eslintignore y agrega las lineas

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
*

Y listo, eslint no te molestara mas 馃拑

Si les muestra el siguiente error:

Pueden agregar una excepci贸n en la configuraci贸n de eslint en el archivo .exlintrc.js, agregando lo siguiente:

module.exports = {
  ....
  overrides: [
    {
      files: ['src/components/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      },
    },
  ],
};

En la carpeta assets pueden colocar el comando

wget https://static.platzi.com/media/public/uploads/close-icon_039b6837-d928-4f74-a2e9-7953715dbfd8.svg -O cashflow-icon.svg
wget https://static.platzi.com/media/public/uploads/trash-icon_5de37388-586f-4cb9-8ba9-1fabd994cb28.svg -O close-icon.svg
wget https://static.platzi.com/media/public/uploads/cashflow-icon_070076db-e83a-4afa-b18d-ee058c2b646e.svg -O trash-icon.svg

y asi descargan los svg al instante

Hola, les dejo el link de Figma que est谩 en la clase anterior鈥

https://www.figma.com/file/P3EL4J17QtATlH1lqYryfG/Personal-CashFlow?node-id=0%3A1

Necesitan utilizar Prettier.

Como recomendaci贸n, activen la opci贸n de auto formateo al "Ctrl + S"

Aseg煤rense de que Prettier es su formateador por defecto:

  1. Ctrl + Shift + P
  2. 鈥淔ormat document with鈥︹

Les comparto mi configuraci贸n para trabajar con eslint y prettier sin errores en Visual Studio Code.

Paso 1:
Instalar plugin Prettier - Code formatter

Paso 2: Habilitar como default formater:
CTRL + SHIFT + P -> Format Document With -> Seleccionar Prettier Code Formater.

Pas 3: Configurar el auto formateo al guardar documento
Crear una carpeta en el proyecto llamado .vscode y dentro de la carpeta un archivo settings.json

Pegar el siguiente codigo

{
    "editor.formatOnSave": true
}

Por 煤ltimo agregar una regla de eslint para permitir que los componentes en Vue sean de una sola palabra:

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/multi-word-component-names": "off",
  },

Esta es mi confugari贸n inicial, lo he hecho con sass con buenas pr谩cticas en dise帽o y algunas configuraciones de eslint con prettier para que no les d茅 dolores de cabeza:
.
Mi repositorio commit actual: Click aqu铆

npm run lint --fix 

con eso arreglar谩n errores que tengan

Yo encontre esto en Stackoverflow y me funciono, se los dejo y espero les sirva:

Cuando vayas a crear el componente Home.vue, asigna un nombre diferente, por ejemplo MyHome.vue. De esta forma, te evitar谩s errores al desplegar la aplicaci贸n, ya que, de acuerdo con una de las reglas de Vue, los componentes no pueden ser de una sola palabra.

si el slint les molesta pueden agregar la siguiente linea en el archivo 鈥渧ue.config.js鈥:

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false // deshabilitar slint
});

En el archivo vue.config.js a帽adi al linea:
"lintOnSave: false,"
Para que pare de revisar al guardar cada modificaci贸n鈥

No es el proyecto Home.vue es el archivo o componente Home.vue

Creando el componente Home.vue

Limpieza del proyecto creado por el asistente vue cli

Creacion del proyecto con vue cli