質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

2835閲覧

The keyword 'export' is reservedの解消方法がわかりません

ff7575

総合スコア123

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2019/12/23 17:32

編集2019/12/26 06:01

以下のサイト(Nuxt.jsの公式サイト)
https://ja.nuxtjs.org/guide/development-tools/
の手順をもとに、eslintおよびprettierを利用できる環境を以下の手順で構築しようとしました。
①npmでeslintとprettierパッケージを以下のコマンド入力によってインストールする

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

何のエラーもなくインストールできました。

②.eslintrc.js ファイルをプロジェクトのルートディレクトにつくって公式サイトどおり ESLint を設定する

module.exports = { root: true, env: { browser: true, node: true }, parserOptions: { parser: 'babel-eslint' }, extends: [ 'eslint:recommended', // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // より厳しいルールにするには`plugin:vue/strongly-recommended` もしくは `plugin:vue/recommended` に切り替えることを検討してください。 'plugin:vue/recommended', 'plugin:prettier/recommended' ], // *.vue ファイルを lint にかけるために必要 plugins: [ 'vue' ], // ここにカスタムルールを追加します。 rules: { 'semi': [2, 'never'], 'no-console': 'off', 'vue/max-attributes-per-line': 'off', 'prettier/prettier': ['error', { 'semi': false }] } }

コピペのため、コード上に問題ないと考えます。

③lint と lintfix スクリプトを package.json に追加する

package.json

1"scripts": { 2 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 3 "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." 4}

コピペのため、コード上に問題ないと考えます。
④以下のコードを実行し、挙動を確認する

npm run lint
npm run lintfix

⑤nuxt.config.jsに以下の通り、記述する。

nuxt.config.js

1 build: { 2............ 3........... 4............ 5 extend(config, ctx) { 6 // Run ESLint on save 7 if (ctx.isDev && ctx.isClient) { 8 config.module.rules.push({ 9 enforce: "pre", 10 test: /.(js|vue)$/, 11 loader: "eslint-loader", 12 exclude: /(node_modules)/ 13 }) 14 } 15 } 16 }

なにも実行しなくともデフォルトで
keyword 'export' is not defined..
とコンソール上に出てしまう

バージョン情報
"nuxt": "^2.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.7.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-vue": "^6.0.1",
"prettier": "^1.19.1",

macOS 10.14.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dameo

2019/12/26 05:12 編集

実際に何をしたのか具体的に書くべきです。 あなたが頭に思い描いてること自体が間違っていて、 ドキュメントを正しく理解できないまま、間違ったことをしているように見えます。 なので、ドキュメントを正しく理解してそのとおりにやった人には、 あなたが実際に何をしてしまっているのか皆目見当がつかないのです。 以下の手順では特に問題はありませんでした。 (1) npx create-nuxt-app simpleapp ↑入力はnpm選択以外、全てEnterキーのみ (2) cd simpleapp (3) npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier (4) vi .eslintrc.js ↑viエディタで質問内容の最初のコードブロックに書かれてる内容と同じになるように編集する (5) vi package.json ↑viエディタでlintとlintfixをpackage.jsonのscriptに追加する (6) vi nuxt.config.js ↑viエディタでnpm run dev中にソース編集でwebpack hot reload機能による再読み込み時にlintを自動で動かすように設定する (5)、(6)の編集結果 ■package.json { "name": "simpleapp", "version": "1.0.0", "description": "My ace Nuxt.js project", "author": "", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ." }, "dependencies": { "nuxt": "^2.0.0" }, "devDependencies": { "babel-eslint": "^10.0.3", "eslint": "^6.8.0", "eslint-config-prettier": "^6.8.0", "eslint-loader": "^3.0.3", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-vue": "^6.0.2", "prettier": "^1.19.1" } } ■nuxt.config.js export default { mode: "universal", /* ** Headers of the page */ head: { title: process.env.npm_package_name || "", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { hid: "description", name: "description", content: process.env.npm_package_description || "" } ], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }] }, /* ** Customize the progress-bar color */ loading: { color: "#fff" }, /* ** Global CSS */ css: [], /* ** Plugins to load before mounting the App */ plugins: [], /* ** Nuxt.js dev-modules */ buildModules: [], /* ** Nuxt.js modules */ modules: [], /* ** Build configuration */ 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)/ }) } } } }
ff7575

2019/12/26 06:20 編集

a
dameo

2019/12/26 06:10

編集履歴のコメントと現状の質問内容が完全にミスマッチしています。 正しく修正するか、削除してください。
guest

回答1

0

自己解決

dameo様のご指摘の通り、質問内容の修正を行なっていた時、再度初めから導入したところ、不明なエラーおよび警告が出現せずに済みました。
dameo様とその他の方々には、このようなことでお時間をとらせてしまい、大変申し訳ありませんでした。
今後は、この反省を生かして質問内容の改善、マニュアルを読み込むことを実践します。

投稿2019/12/26 06:15

ff7575

総合スコア123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問