Создание эталонного приложения на NuxtJS с афтофиксингом кода на стороне сервера

Данная статья содержит пошаговую инструкцию по созданию нового NuxtJS с автоматической проверкой вашего кода на ошибки и стилистические недочет. После чего автоматически при сохранении изменений в файлах Nuxt при разработке, Webpack будет автоматически исправлять код и приводить его к стандартизированному формату. Это крайне полезный инструмент и должен быть реализован во всех проектах.

Установка Nuxt

Создаем новое Nuxt приложение myNuxtApp спомощью оффициального конфигуратора create-nuxt-app. Встаем в директорию с вашими проектами и запускаем создание приложения

cd C:\Develop
npx create-nuxt-app myNuxtApp

Для примера используются следующие настройки, содержащие оптимальный набор для разработки современного веб приложения. В данном примере для отрисовки UI используется VuetifyJS, являющийся эталонным UI Framework от разработчиков Google Material

create-nuxt-app v3.7.1
✨  Generating Nuxt.js project in myNuxtApp
? Project name: myNuxtApp
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier, StyleLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

Переходим в директорию с проектом и устанавливаем загрузчик eslint и плагин для Prettier, позволяющие обрабатывать и автокорректировать ваш код

cd myNuxtApp
npm install eslint-loader eslint-plugin-prettier --save-dev

Приводим .eslintrc.js к следующему виду

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'plugin:vue/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['vue'],
  // add your custom rules here
  rules: {
    semi: [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
    'prettier/prettier': ['error', {
      htmlWhitespaceSensitivity: 'ignore',
      semi: false,
      singleQuote: true
    }]
  }
}

Включение автофиксинга кода

В nuxt.config.js добавляем следующий код, для удобства лучше разместить под buildModules

  eslint: {
    fix: true
  },

Запускаем приложение

npm run dev

Теперь после внесение изменений в любые файлы проекта Nuxt, eslint будет проверять ваш код и автокорректировать его приводя к стандарным правилам написания качественного кода на JavaScript

Проверим, открываем файл шаблона главной страницы и портим код, внося в него неясность

Сохраняем изменения (Ctrl+S) и у нас снова стилистически правильный код

Плюсом данного подхода является то, что настройки приведения кода проекта к единому формату заложены в нем самом. Поэтому это не требует никаких дополнительных настроек для ваших текстовых редакторов или IDE, с такой конфигурацией можно создавать качественные приложения на NuxtJS используя даже блокнот.

Установка и добавление Express в Nuxt

Устанавливаем Express

npm install express --save

Добавляем блоки кода в nuxt.config.js

  // Nuxt target, See https://nuxtjs.org/api/configuration-target
  target: 'server',
  // Server Middleware
  serverMiddleware: {
    '/api': '~/api'
  },
  // - For deployment you might want to edit host and port
  // server: {
  //  port: 8000, // default: 3000
  //  host: '0.0.0.0' // default: localhost
  // },
  // Enabling extracting css and hot reload server middleware on changes
  build: {
    extractCSS: true,
    watch: ['api']
  }

Создаем директории /api/ и /api/routes/. Добавляем файл /api/index.js со следующим содержанием:

const express = require('express')

// Create express instance
const app = express()

// Require API routes
const test = require('./routes/test')

// Import API Routes
app.use(test)

// Export express app
module.exports = app

// Start standalone server if directly running
if (require.main === module) {
  const port = process.env.PORT || 3001
  app.listen(port, () => {
    // eslint-disable-next-line no-console
    console.log(`API server listening on port ${port}`)
  })
}

И файл маршрутов /api/routes/test.js

const { Router } = require('express')

const router = Router()

// Test route
router.use('/test', (req, res) => {
  res.end('This text gathered from API based on ExpressJS')
})

module.exports = router

Проверка автофиксинга работы Express. Создадим на главной странице метод получения данных из Express API

Создаем новую страницу Nuxt в /pages/test.js со следующим кодом:

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <v-card>
        <v-card-title class="headline">
          Welcome to the Nuxt Express!
        </v-card-title>
        <v-card-text>
          <p>Nuxt Express application with Vuetify UI</p>
        </v-card-text>
        <v-card-text>
          <code class="pa-3">{{ testAPI }}</code>
        </v-card-text>
        <v-card-actions class="pa-5">
          <v-spacer />
          Card actions
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const testAPI = await $axios.$get('/api/test')
    return {
      testAPI,
    }
  },
}
</script>

Переходим на http://localhost:3000/test и смотрим полученный из Express API текст

Включение автофиксинга кода serverMiddleware для Express

Автофиксинг кода на стороне Nuxt для подключаемого serverMiddleware не предусмотрен разработчиками. Поэтому следить за изменениями и автофиксинг кода подключаем через package.json.

Устанавливаем nodemon и concurrently.

nodemon требуется для слежения за директорией с Express и выполнения команды для автофиксинга npm run lint.
concurrently нужен для того, чтобы параллельного запуска двух процессов: Nuxt и nodemon

npm install nodemon concurrently --save-dev

Вносим изменения в секцию scripts в файле package.json

  "scripts": {
    "dev": "concurrently --raw --kill-others \"nuxt\" \"npm run watch\"",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --fix --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --fix --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "watch": "nodemon --watch api --exec \"npm run lint\""
  },

После запуска Nuxt в dev режиме код будет автофикситься во всех директориях Nuxt средствами eslint-module, а в директории api код будет автофикситься с помощью nodemon

Запускаем и проверяем

npm run dev