国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

draveness / 890人閱讀

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

腳手架安裝好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 保存自動格式化&修復(fù)

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

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

.vscode/settings.json

{
    // 保存時eslint自動修復(fù)錯誤
    "eslint.autoFixOnSave": true,
    // 保存自動格式化
    "editor.formatOnSave": true,
    // 開啟 eslint 支持
    "prettier.eslintIntegration": true,
    // prettier配置 --- 使用單引號【與.prettierrc下的配置對應(yīng)】
    "prettier.singleQuote": true,
    //prettier配置 --- 結(jié)尾不加分號 【與.prettierrc下的配置對應(yīng)】
    "prettier.semi": false,
    //prettier配置 --- 每行最多顯示的字符數(shù) 【與.prettierrc下的配置對應(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, // 使用單引號 `.vscode/settings.json` 的`prettier.semi`
    "semi": false, // 結(jié)尾不加分號 `.vscode/settings.json` 的`prettier.semi`
    "printWidth": 120 // 此項(xiàng)為我自加以上兩項(xiàng)為默認(rèn)，表示每行最多顯示的字符數(shù)，默認(rèn)為80，本人覺得太短了，因此修改了一下，必須與`.vscode/settings.json` 的`prettier.printWidth`對應(yī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個空格縮進(jìn)
        /* 更多配置請戳 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就會使用默認(rèn)值自動更新此配置文件

.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 報錯 Cannot find module "xxxx"

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109662.html

相關(guān)文章

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

    摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發(fā)實(shí)踐經(jīng)驗(yàn)相關(guān)字眼。我們主要從端公眾號移動端小程序三大平臺進(jìn)行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢。技術(shù)的優(yōu)勢互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...

    ccj659 評論0 收藏0

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

    摘要：前言本文講解如何在項(xiàng)目中使用來搭建并開發(fā)項(xiàng)目，并在此過程中踩過的坑。具有類型系統(tǒng)，且是的超集，在年勢頭迅猛，可謂遍地開花。年將會更加普及，能夠熟練掌握，并使用開發(fā)過項(xiàng)目，將更加成為前端開發(fā)者的優(yōu)勢。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項(xiàng)目中使用 TypeScript...

    luckyyulin 評論0 收藏0

  • vue nuxt配置typescript

    摘要：如果在文件中引入模塊報錯那么創(chuàng)建做兼容重啟如果你在引入成功的時候，但是還是報錯找不到模塊等，那么請在方面找一下，相信可以解決你的問題。 背景： 因?yàn)楣疽龇?wù)器渲染配置的TS有點(diǎn)很坑的，故此記錄一下 項(xiàng)目初始化 可以根據(jù)官網(wǎng)的安裝步驟選擇自己用的依賴進(jìn)行安裝，[詳情請看][1]，主要詳細(xì)的說下nuxt如何配置typescript 在工程目錄中創(chuàng)建tsconfig.json...

    harryhappy 評論0 收藏0

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

    摘要：即將發(fā)布經(jīng)過漫長的等待，即將發(fā)布。是一款很不錯的組件庫，雖然在的下載量仍遠(yuǎn)高于，但不可否認(rèn)的是在生態(tài)和社區(qū)活躍度上，更勝一籌。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,...

    NusterCache 評論0 收藏0

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

    摘要：注本文是我在開發(fā)過程中遇到問題及解決方法的總結(jié)，之后會持續(xù)更新，希望幫助到更多的學(xué)習(xí)者。文中有不妥的地方希望指出共同學(xué)習(xí)，同時歡迎一起補(bǔ)充。 注：本文是我在開發(fā)過程中遇到問題及解決方法的總結(jié)，之后會持續(xù)更新，希望幫助到更多的學(xué)習(xí)者。文中有不妥的地方希望指出共同學(xué)習(xí)，同時歡迎一起補(bǔ)充。 npm篇 npm安裝依賴報錯：permission denied，錯誤信息大致如下： npm ERR!...

    ddongjian0000 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<