configuración de proyecto vue3+vite ESlint, complemento de impresora

Configurar complementos de impresora y ESlint

En un proyecto Vue 3 + Vite, puede configurar los complementos ESLint y Prettier con los siguientes pasos:

Instalar complementos:
en el directorio raíz del proyecto, abra una terminal y ejecute los siguientes comandos para instalar los complementos ESLint y Prettier:
```
npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
```
El comando anterior instalará ESLint, Prettier y complementos y configuraciones relacionados.
Crear .eslintrc.jsun archivo:
cree un archivo con el nombre en el directorio raíz del proyecto .eslintrc.jsy agregue el siguiente contenido:
```
module.exports = {
      
      
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/vue'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
      
      
    'prettier/prettier': 'error'
  }
};
```
En la configuración anterior, usamos plugin:vue/vue3-recommendedla extensión para configurar ESLint según las reglas recomendadas por Vue 3. Además, hemos introducido prettierextensiones prettier/vuepara admitir las reglas de formato de Prettier. Finalmente, configuramos prettier/prettierla regla, estableciéndola en un nivel de error, para garantizar que el código se ajuste al formato Prettier.
Crear .prettierrc.jsun archivo:
cree un archivo con el nombre en el directorio raíz del proyecto .prettierrc.jsy agregue el siguiente contenido:
```
module.exports = {
      
      
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2
};
```
En la configuración anterior, usamos algunas configuraciones comunes de Prettier, como semi(si usar punto y coma), singleQuote(si usar comillas simples), trailingComma(si usar coma final), printWidth(longitud máxima de línea) y tabWidth(número de espacios para sangría ) .
Configure el editor de VS Code:
si está utilizando el editor de VS Code, puede configurar el formateo automático y la verificación de especificaciones de código al guardar mediante los siguientes pasos:
- Instale los siguientes complementos en la tienda de extensiones: ESLint, Prettier - Formateador de código
- Abra la configuración ( Preferences → Settings) de VS Code, busque y edite los siguientes elementos de configuración:
```
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
        
        
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
        
        
    "language": "vue",
    "autoFix": true
  }
]
```
La configuración anterior habilitará el formato de código al guardar y ESLint para archivos Vue.
Ejecute la inspección y el formateo del código:
ejecute los siguientes comandos en la terminal para inspeccionar y formatear el código:
```
npx eslint .
npm run lint --fix
```
Use el comando anterior para verificar la especificación del código en el proyecto y solucionar algunos problemas simples.

A través de los pasos anteriores, puede configurar los complementos ESLint y Prettier en su proyecto Vue 3 + Vite y usarlos para mantener la calidad del código y la consistencia del estilo.

Escenarios de uso y ventajas y desventajas.

El uso de ESLint y el complemento Prettier trae los siguientes escenarios y pros y contras:

Escenas a utilizar:

Estilo de código unificado: ESLint y Prettier pueden aplicar una especificación de estilo de código coherente, garantizar que el código escrito por los miembros del equipo tenga un estilo coherente y mejorar la legibilidad y la capacidad de mantenimiento del código.
Detectar posibles problemas: ESLint puede detectar posibles problemas y errores en el código, como variables no declaradas, variables no utilizadas, código innecesario, etc., para ayudar a los desarrolladores a encontrar y solucionar estos problemas durante el proceso de desarrollo.
Formato automático: Prettier puede formatear automáticamente el código para que el código mantenga una sangría consistente, saltos de línea, comillas, etc., lo que reduce el tiempo y la carga de trabajo de ajustar manualmente el formato del código.

ventaja:

Estilo de código coherente: al configurar reglas unificadas de ESLint y Prettier, puede asegurarse de que el código escrito por los miembros del equipo tenga un estilo coherente y mejore la legibilidad y la capacidad de mantenimiento del código.
Mejorar la calidad del código: ESLint puede detectar posibles problemas y errores en el código, ayudar a los desarrolladores a encontrar y solucionar estos problemas durante el proceso de desarrollo y mejorar la calidad del código.
Formato automático: Prettier puede formatear automáticamente el código para que el código mantenga una sangría consistente, saltos de línea, comillas, etc., lo que reduce el tiempo y la carga de trabajo de ajustar manualmente el formato del código.

defecto:

Complejidad de la configuración: la configuración de ESLint y Prettier puede llevar algo de tiempo y costos de aprendizaje, especialmente para los desarrolladores primerizos que necesitan comprender las reglas y las opciones de configuración del complemento.
Flexibilidad reducida: es posible que ciertas reglas y opciones de formato no coincidan con las preferencias individuales o del equipo, por lo que es posible que se requiera tiempo y esfuerzo adicionales para ajustar y personalizar las reglas y opciones.
Gastos generales adicionales: ESLint y Prettier deben ejecutarse cada vez que se guarda o crea el código para verificar y formatear el código, lo que puede agregar algunos gastos generales adicionales, especialmente en proyectos grandes.

En resumen, los complementos ESLint y Prettier desempeñan un papel importante en la unificación del estilo del código, la mejora de la calidad del código y el formateo automático, pero deben sopesar la complejidad y la flexibilidad de la configuración, así como la sobrecarga adicional. En la mayoría de los casos, son muy beneficiosos para el mantenimiento de proyectos y la colaboración en equipo.

Vite empaqueta y divide js y css

Cuando se utiliza Vite para empaquetar, los archivos JavaScript y CSS generados se pueden dividir a través de la configuración. Aquí hay algunas opciones de configuración de uso común:

Dividir archivos JavaScript:
en el archivo, los elementos de configuración vite.config.jsse pueden usar para especificar el método de división de los archivos JavaScript. rollupOptionsPor ejemplo, los fragmentos en los que dividir se pueden especificar manualmente utilizando outputel atributo de la opción :manualChunks
```
export default {
      
      
  rollupOptions: {
      
      
    output: {
      
      
      manualChunks: {
      
      
        vendor: ['vue', 'axios'], // 将 vue 和 axios 打包到 vendor.js
        utils: /^lodash/ // 打包以 lodash 开头的模块到 utils.js
      }
    }
  }
}
```
En la configuración anterior, especificamos dos bloques divididos vendory utils. vendorLos bloques contienen Vue y Axios, mientras que utilslos bloques contienen módulos que comienzan con lodash.
Dividir archivos CSS:
de forma predeterminada, Vite empaquetará todos los archivos CSS en un solo archivo. Si necesita dividir archivos CSS, puede usar extractCSSelementos de configuración para habilitar la división:
```
export default {
      
      
  build: {
      
      
    cssCodeSplit: true
  }
}
```
Después de usar la configuración anterior, Vite extraerá el CSS de cada archivo de entrada en un archivo separado.

Cabe señalar que la división de archivos JavaScript y CSS puede aumentar las solicitudes de red adicionales, por lo que es necesario equilibrar el rendimiento de carga y la cantidad de archivos al dividir. Según la situación real, se puede realizar una configuración dividida razonable según las dependencias de los módulos y el tamaño del código.