Nuxt項(xiàng)目支持eslint+pritter+typescript

draveness 發(fā)布于2019-08-26 13:51 / 902人閱讀

摘要：腳手架安裝好的基本項(xiàng)目項(xiàng)目名，如，按照提示安裝你想要的東西，本次項(xiàng)目預(yù)裝模式下，默認(rèn)的項(xiàng)目目錄如下保存自動(dòng)格式化修復(fù)本人習(xí)慣縮進(jìn)為個(gè)空格，但是生成的項(xiàng)目默認(rèn)為個(gè)，因此需要更改配置文件下的更改為保存時(shí)自動(dòng)修復(fù)錯(cuò)誤保存自動(dòng)格式化開啟支

腳手架安裝好nuxt的基本項(xiàng)目

npx create-nuxt-app <項(xiàng)目名>，如：npx create-nuxt-app nuxt-ts，按照提示安裝你想要的東西，本次項(xiàng)目預(yù)裝： Universal模式下koa+PWA+linter+prettier+axios ，默認(rèn)的項(xiàng)目目錄如下：

eslint + prettier + vscode 保存自動(dòng)格式化&修復(fù)

本人習(xí)慣縮進(jìn)為4個(gè)空格，但是eslint&nuxt生成的項(xiàng)目默認(rèn)為2個(gè)，因此需要更改配置

.editorconfig文件下的indent_size: 2更改為indent_size: 4

.vscode/settings.json

{
    // 保存時(shí)eslint自動(dòng)修復(fù)錯(cuò)誤
    "eslint.autoFixOnSave": true,
    // 保存自動(dòng)格式化
    "editor.formatOnSave": true,
    // 開啟 eslint 支持
    "prettier.eslintIntegration": true,
    // prettier配置 --- 使用單引號(hào)【與.prettierrc下的配置對(duì)應(yīng)】
    "prettier.singleQuote": true,
    //prettier配置 --- 結(jié)尾不加分號(hào) 【與.prettierrc下的配置對(duì)應(yīng)】
    "prettier.semi": false,
    //prettier配置 --- 每行最多顯示的字符數(shù) 【與.prettierrc下的配置對(duì)應(yīng)】
    "prettier.printWidth": 120,
    //.vue文件template格式化支持，并使用js-beautify-html插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    //js-beautify-html格式化配置，屬性強(qiáng)制換行
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // "wrap_attributes": "force-aligned"
        }
    },
    //根據(jù)文件后綴名定義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, // 使用單引號(hào) `.vscode/settings.json` 的`prettier.semi`
    "semi": false, // 結(jié)尾不加分號(hào) `.vscode/settings.json` 的`prettier.semi`
    "printWidth": 120 // 此項(xiàng)為我自加以上兩項(xiàng)為默認(rèn)，表示每行最多顯示的字符數(shù)，默認(rèn)為80，本人覺得太短了，因此修改了一下，必須與`.vscode/settings.json` 的`prettier.printWidth`對(duì)應(yīng)上
/* 更多配置請(qǐng)戳 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個(gè)空格縮進(jìn)
        /* 更多配置請(qǐng)戳 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.json 的 dev 腳本中 server/index.js 為 server/index.ts

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

tsconfig.json

項(xiàng)目目錄下新建tsconfig.json文件后，在package.json文件下添加：
"start-dev": "nuxt" 腳本命令，運(yùn)行npm run dev就會(huì)使用默認(rèn)值自動(dòng)更新此配置文件

.eslintrc.js

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

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

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

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

nuxt.config.js

修改nuxt.config.js文件后綴為 nuxt.config.ts

修改nuxt.config.ts的build.extend

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

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語法

typescript 語法如下：

坑點(diǎn)

vetur 報(bào)錯(cuò) Cannot find module "xxxx"

解決方案：import 路徑需要寫清楚后綴

云服務(wù)器 GPU云服務(wù)器 pritter ESLint nuxt nuxt.js

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109662.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

draveness

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 820·2023-04-25 20:18
如何讓直播延遲低體驗(yàn)更好？使用摩杜云視頻直播就可以了！

閱讀 2104·2021-11-22 13:54
win10如何安裝visual studio并運(yùn)行C++

閱讀 2547·2021-09-26 09:55
什么是主機(jī)的域名-主機(jī)域名是哪個(gè)？

閱讀 3912·2021-09-22 15:28
Linux 30周年：Linux 5.14閃亮登場(chǎng)！添加新硬件和秘密內(nèi)存區(qū)域支持

閱讀 2982·2021-09-03 10:34
傲游主機(jī)：美國CN2/香港CN2/德國CN2/荷蘭CN2/香港高防VPS全場(chǎng)8折

閱讀 1719·2021-07-28 00:15
js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

閱讀 1645·2019-08-30 14:25
深入理解瀏覽器的緩存機(jī)制

閱讀 1289·2019-08-29 17:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Nuxt項(xiàng)目支持eslint+pritter+typescript

相關(guān)文章

珠峰前端架構(gòu)師培養(yǎng)計(jì)劃

**Vue + TypeScript + Element 項(xiàng)目實(shí)踐(簡(jiǎn)潔時(shí)尚博客網(wǎng)站)及踩坑記**

vue nuxt配置typescript

Nuxt 3 即將發(fā)布、layui 即將退出歷史舞臺(tái) | 淘系前端架構(gòu)周刊 210927 期

工作中常見問題匯總及解決方案

發(fā)表評(píng)論

0條評(píng)論

draveness

男|高級(jí)講師

TA的文章

tensorflow

如何讓直播延遲低體驗(yàn)更好？使用摩杜云視頻直播就可以了！

win10如何安裝visual studio并運(yùn)行C++

什么是主機(jī)的域名-主機(jī)域名是哪個(gè)？

Linux 30周年：Linux 5.14閃亮登場(chǎng)！添加新硬件和秘密內(nèi)存區(qū)域支持

傲游主機(jī)：美國CN2/香港CN2/德國CN2/荷蘭CN2/香港高防VPS全場(chǎng)8折

js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

深入理解瀏覽器的緩存機(jī)制

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

Nuxt項(xiàng)目支持eslint+pritter+typescript

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！