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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
如何使用PHP获取网络上文件
2006/10/09 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
js 实现浏览历史记录示例
2014/04/20 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
vue router demo详解
2017/10/13 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
HTML5图片预览实例分享
2014/06/04 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
宿舍打麻将检讨书
2014/01/24 职场文书
挂职学习心得体会
2014/09/09 职场文书
文言文辞职信
2015/02/28 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
在JavaScript中如何使用宏详解
2021/05/06 Javascript
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Java 超详细讲解hashCode方法
2022/04/07 Java/Android