实例分享Nuxt项目支持eslint+pritter+typescript

  • 时间:
  • 7431人关注

这篇文章主要介绍了Nuxt项目支持eslint+pritter+typescript的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,另外这篇文章主要知识点是关于Nuxt、eslint、pritter、typescript、vue的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:vue
  • 编辑整理:邓智鑫
  • 教程字数:3854字节
  • 阅读时间:大概16分钟
  • 下载本教程(DOC版)
  • 脚手架安装好nuxt的基本项目

    npx create-nuxt-app <项目名>,如:npx create-nuxt-app nuxt-ts,按照提示安装你想要的东西,本次项目预装: Universal模式下koa+PWA+linter+prettier+axios ,默认的项目目录如下:

    Nuxt项目支持eslint+pritter+typescript的实现

    eslint + prettier + vscode 保存自动格式化&修复

    本人习惯缩进为4个空格,但是eslint&nuxt生成的项目默认为2个,因此需要更改配置

    • .editorconfig文件下的indent_size: 2更改为indent_size: 4
    • .vscode/settings.json
    {
     // 保存时eslint自动修复错误
     "eslint.autoFixOnSave": true,
     // 保存自动格式化
     "editor.formatOnSave": true,
     // 开启 eslint 支持
     "prettier.eslintIntegration": true,
     // prettier配置 --- 使用单引号【与.prettierrc下的配置对应】
     "prettier.singleQuote": true,
     //prettier配置 --- 结尾不加分号 【与.prettierrc下的配置对应】
     "prettier.semi": false,
     //prettier配置 --- 每行最多显示的字符数 【与.prettierrc下的配置对应】
     "prettier.printWidth": 120,
     //.vue文件template格式化支持,并使用js-beautify-html插件
     "vetur.format.defaultFormatter.html": "js-beautify-html",
     //js-beautify-html格式化配置,属性强制换行
     "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
       // "wrap_attributes": "force-aligned"
      }
     },
     //根据文件后缀名定义vue文件类型
     "files.associations": {
      "*.vue": "vue"
     },
     //配置 ESLint 检查的文件类型
     "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
       "language": "vue",
       "autoFix": true
      },
      {
       "language": "typescript",
       "autoFix": true
      }
     ],
     "files.autoSave": "onFocusChange",
     "vetur.format.enable": false,
     "vetur.experimental.templateInterpolationService": true,
     "editor.detectIndentation": false
    }

    .prettierrc文件

    {
     "singleQuote": true, // 使用单引号 `.vscode/settings.json` 的`prettier.semi`
     "semi": false, // 结尾不加分号 `.vscode/settings.json` 的`prettier.semi`
     "printWidth": 120 // 此项为我自加以上两项为默认,表示每行最多显示的字符数,默认为80,本人觉得太短了,因此修改了一下,必须与`.vscode/settings.json` 的`prettier.printWidth`对应上
    /* 更多配置请戳 https://prettier.io/docs/en/options.html */
    }

    .eslintrc.js文件配置

    module.exports = {
     root: true,
     env: {
      browser: true,
      node: true
     },
     parserOptions: {
      parser: 'babel-eslint'
     },
     extends: [
      '@nuxtjs',
      'plugin:nuxt/recommended',
      'plugin:prettier/recommended',
      'prettier',
      'prettier/vue'
     ],
     plugins: ['prettier'],
     // add your custom rules here
     rules: {
      'nuxt/no-cjs-in-config': 'off',
      indent: ['error', 4] // 4个空格缩进
      /* 更多配置请戳 http://eslint.cn/docs/rules/ */
     }
    }

    nuxt.config.js文件下 build.extend(config, ctx) {}添加options.fix: true

     build: {
      /*
       ** You can extend webpack config here
       */
      extend(config, ctx) {
       // Run ESLint on save
       if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
         enforce: 'pre',
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         exclude: /(node_modules)/,
         options: {
          fix: true
         }
        })
       }
      }
     }
    

    开始改造工程支持typescript

    安装所需插件

    • npm i -D @nuxt/typescript ts-node @typescript-eslint/eslint-plugin
    • npm install -S vue-class-component vue-property-decorator

    修改&添加配置

    package.json

    添加或编辑package.json的lint脚本:
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."

    修改package.jsondev 脚本中 server/index.jsserver/index.ts

    "dev": "cross-env NODE_ENV=development nodemon server/index.ts --watch server",

    tsconfig.json

    项目目录下新建tsconfig.json文件后,在package.json文件下添加:
    "start-dev": "nuxt" 脚本命令,运行npm run dev就会使用默认值自动更新此配置文件

    .eslintrc.js

    修改.eslintrc.js文件 parserOptions.parser: '@typescript-eslint/parser'

    parserOptions: {
     parser: '@typescript-eslint/parser'
    },

    修改.eslintrc.js文件 plugins添加'@typescript-eslint'

    plugins: ['prettier', '@typescript-eslint'],

    Nuxt项目支持eslint+pritter+typescript的实现

    nuxt.config.js

    修改nuxt.config.js文件后缀为 nuxt.config.ts

    修改nuxt.config.tsbuild.extend

    {
     test: /\.ts$/,
     exclude: [/node_modules/, /vendor/, /\.nuxt/],
     loader: 'ts-loader',
     options: {
      appendTsSuffixTo: [/\.vue$/],
      transpileOnly: true
     }
    }

    Nuxt项目支持eslint+pritter+typescript的实现

    server/index.js

    修改server/index.js文件后缀为 server/index.ts

    修改server/index.ts中的

    const config = require('../nuxt.config.js')
    
    // 为
    
    const config = require('../nuxt.config.ts')

    修改vue文件为typescript语法

    <script>
    import Logo from '~/components/Logo.vue'
    
    export default {
     components: {
      Logo
     }
    }
    </script>

    typescript 语法如下:

    <script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    import Logo from '~/components/Logo.vue'
    
    @Component({
     components: {
      Logo
     },
     middleware: 'check-auth'
    })
    export default class IndexPage extends Vue {}
    </script>
    

    坑点

    vetur 报错 Cannot find module 'xxxx'

    解决方案:import 路径 需要写清楚后缀

    Nuxt项目支持eslint+pritter+typescript的实现

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


    上一篇:解决vue-cli不能初始化webpack模板方法

    下一篇:解决Vue Router的懒加载路径的方案

    相关内容

    • Nuxt配合Node在实际生产中的应用示例效果

      这篇文章主要介绍了Nuxt配合Node在实际生产中的应用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      01-20Nuxt配合Node在实际生产中的应用详解

      阅读更多
    • 详细介绍React开发必不可少的eslint配置

      本篇文章主要介绍了详解React开发必不可少的eslint配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

      02-10详解React开发必不可少的eslint配置

      阅读更多
    • Vue.js快速入门

      Vue.js快速入门

      目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

      大小:186.6 MBWeb前端

      点击下载
    • 水晶石技法VUE 10完全学习手册

      水晶石技法VUE 10完全学习手册

      《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见

      大小:114191 MB VUE10学习手册

      点击下载
    • Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

      Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统

      本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

      大小:132979 MB 项目实战

      点击下载
    • Vue.js快速入门

      Vue.js快速入门

      目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。

      大小:26581 MB MVue.js入门

      点击下载
    • 前端工程师必备技能:Vue移动开发实战技巧

      前端工程师必备技能:Vue移动开发实战技巧

      Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

      大小:122 MBVue实战

      点击下载
    • Vue.js项目实战

      Vue.js项目实战

      Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

      大小:141 MBVue

      点击下载
    • JavaScript+Vue+React全程实例

      JavaScript+Vue+React全程实例

      这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。

      大小:59150 MB MJS实例

      点击下载
    • Vue企业开发实战

      Vue企业开发实战

      本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

      大小:109.6 MBVue.js实战

      点击下载
    • Vue.js前端开发:快速入门与专业应用

      Vue.js前端开发:快速入门与专业应用

      本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

      大小:3.6KB MB前端开发

      点击下载

    学习笔记