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 💃
Introducción
Construye una aplicación para el control de tus gastos con Vue.js
Creación del proyecto
Setup inicial
Splashscreen
Header y contenido
Layout
Vista
Resumen de datos
Agregando formato a la moneda
Componente del historial
Lista del historial
El botón para agregar
Formulario para agregar
Gráfico
Creación del SVG del gráfico
Creación de las coordenadas en el gráfico
Creación de la lógica del gráfico
Creando la interacción con el gráfico
Modelo
Modelo de datos
Agregar y quitar
Persistencia del modelo
Últimos detalles de nuestra aplicación
Cierre
Poniendo nuestra aplicación en producción en Netlify
¿Quieres más cursos de Vue?
Aportes 16
Preguntas 6
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:
Ctrl + Shift + P
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
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 “vue.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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.