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


Posted in Javascript onMay 20, 2019

脚手架安装好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的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
javascript封装简单实现方法
Aug 11 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
js实现微信聊天界面
Aug 09 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 #Javascript
vue-cli webpack配置文件分析
May 20 #Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 #Javascript
微信小程序rich-text富文本用法实例分析
May 20 #Javascript
bootstrap中的导航条实例代码详解
May 20 #Javascript
详解小程序云开发数据库
May 20 #Javascript
VUE脚手架具体使用方法
May 20 #Javascript
You might like
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
js 判断 enter 事件
2009/02/12 Javascript
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
shiro授权的实现原理
2017/09/21 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python单链表的简单实现方法
2014/09/23 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
详谈python read readline readlines的区别
2017/09/22 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
《诺贝尔》教学反思
2014/02/17 职场文书
教师节标语大全
2014/10/07 职场文书
学习党史心得体会2016
2016/01/23 职场文书
2019大学生实习报告
2019/06/21 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL