Nuxt項目支持eslint+pritter+typescript

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

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

腳手架安裝好nuxt的基本項目

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

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配置 --- 每行最多顯示的字符數(shù) 【與.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"
        }
    },
    //根據(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, // 結尾不加分號 `.vscode/settings.json` 的`prettier.semi`
    "printWidth": 120 // 此項為我自加以上兩項為默認，表示每行最多顯示的字符數(shù)，默認為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.json 的 dev 腳本中 server/index.js 為 server/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.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 語法如下：

坑點

vetur 報錯 Cannot find module "xxxx"

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

云服務器 GPU云服務器 pritter ESLint nuxt nuxt.js

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/109662.html

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

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

ccj659 2021-11-22 15:24 評論0 收藏0
Vue + TypeScript + Element 項目實踐(簡潔時尚博客網(wǎng)站)及踩坑記

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

luckyyulin 2019-08-26 13:39 評論0 收藏0
vue nuxt配置typescript

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

harryhappy 2019-08-23 17:01 評論0 收藏0
Nuxt 3 即將發(fā)布、layui 即將退出歷史舞臺 | 淘系前端架構周刊 210927 期

摘要：即將發(fā)布經(jīng)過漫長的等待，即將發(fā)布。是一款很不錯的組件庫，雖然在的下載量仍遠高于，但不可否認的是在生態(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 2021-09-29 09:35 評論0 收藏0
工作中常見問題匯總及解決方案

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

ddongjian0000 2019-08-21 18:41 評論0 收藏0