Nuxt项目支持eslint+pritter+typescript

2019-05-20 admin

脚手架安装好nuxt的基本项目

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

clipboard.png

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
}
{
    "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 */
}
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'],

clipboard.png

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
    }
}

clipboard.png

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'

clipboard.png

[转载]原文链接:https://segmentfault.com/a/1190000019230150

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65356.html

文章标题:Nuxt项目支持eslint+pritter+typescript

相关文章
js完美解决IE6不支持position:fixed的bug
先来看段代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text&#...
2017-03-22
vue项目使用WebViewJavascriptBridge
&lt;meta itemprop=“headline” content=“vue项目使用WebViewJavascriptBridge”&gt;&lt;meta itemprop=“datePublished” content=“2018...
2018-03-22
js表格排序实例分析(支持int,float,date,string四种数据类型)
本文实例讲述了js表格排序的方法。分享给大家供大家参考。具体如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;SortTable2&lt;&#x2F;title&gt; &lt;meta http-equ...
2017-03-23
JavaScript让Textarea支持tab按键的方法
本文实例讲述了JavaScript让Textarea支持tab按键的方法。分享给大家供大家参考。具体实现方法如下: HTMLTextAreaElement.prototype.getCaretPosition = function () {...
2017-03-25
自己编写的支持Ajax验证的JS表单验证插件
自己编写了一个表单验证插件,支持ajax验证,使用起来很简单。 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空;rule表示验证规则,msg表示错误提示信息...
2017-03-23
nuxt.js部署vue应用到服务端过程
由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染 移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成。 现在记录一下部署中的过程。 注:部署时候过程中,参考了下:https://seg...
2018-04-18
c#程序员对TypeScript的认识过程
简介 TypeScript一直发展不错,我们公司在开发新功能时,考虑到程序的可维护性,使用了TypeScript编写浏览器上的程序,我们是从零开始使用TypeScript,甚至我连javascript也是半罐子,本文描述了一个c#程序员认识...
2017-03-25
TypeScript 中接口详解
在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScript 的时候,所有的接口都会被擦除掉,因为 JavaScript 中并没有接口这一概念。 先看看一个简单的例子: function printLabel(labe...
2017-03-25
使用 TypeScript 构建 Koa2 项目的最佳实践
the best practice of building Koa2 with TypeScript. 中文 usage clone repo. git clone git@github.com:DhyanaChina/koa2-type...
2018-02-27
nuxt scss 全局变量设置问题 nuxt-sass-resources-loader
因为百度搜不到,所以写下这篇文章 答案:https://www.npmjs.com/package… 作为非菜鸟,遇到这问题我很快就想到改webpack配置,在nuxt.conifg.js里,然而始终不行,最终放弃了自己的探索和百度的解决方...
2018-06-13
回到顶部