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 相关文章推荐
jQuery 名称冲突的解决方法
Apr 08 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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和ACCESS写聊天室(十)
2006/10/09 PHP
php error_log 函数的使用
2009/04/13 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
微信小程序自定义组件
2017/08/16 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
python基于socket实现网络广播的方法
2015/04/29 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
django之常用命令详解
2016/06/30 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python对一个数向上取整的实例方法
2020/06/18 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
主持人演讲稿范文
2013/12/28 职场文书
会计岗位职责模板
2014/03/12 职场文书
大学课外活动总结
2014/07/09 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
开票证明
2015/06/23 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers