プロジェクトの作成
|
1 |
$ npm init vite@latest |
下記のコマンドを実行して、vite プロジェクトを作成します。
表示された選択肢を選んで進めていきます。
今回は、React + TypeScript を選択していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/var/www/html # npm create vite Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y ✔ Project name: … simple ✔ Select a framework: › React ✔ Select a variant: › JavaScript Scaffolding project in /var/www/html/simple... Done. Now run: cd simple npm install npm run dev |
選択肢の途中では、下記の４つから選択することができます。
SWCについての説明については、参考サイトで解説されています。
詳しい解説を知りたい場合には、参考サイトを参照してください。
・JavaScript
・TypeScript
・JavaScript + SWC
・TypeScript + SWC
|
1 2 3 4 5 6 7 8 9 10 |
/var/www/html # cd simple /var/www/html/simple # npm install added 14 packages, and audited 15 packages in 5s 4 packages are looking for funding run `npm fund` for details found 0 vulnerabilities /var/www/html/simple # |
build 実行
|
1 |
$ npm run dev |
|
1 2 3 4 5 6 7 |
/var/www/html/simple # npm run dev VITE v4.2.1 ready in 3696 ms ➜ Local: http://localhost:5173/ ➜ Network: http://172.21.0.5:5173/ ➜ press h to show help |
ブラウザで下記のURLにアクセスして確認します。
http://localhost:5173
ESLint
|
1 |
$ npm install eslint |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
added 86 packages, and audited 223 packages in 9s 39 packages are looking for funding run `npm fund` for details found 0 vulnerabilities 下記のコマンドを実行して、対話形式で進めていきます。 /var/www/html/simple # npm init @eslint/config Need to install the following packages: @eslint/create-config@0.4.2 Ok to proceed? (y) y ✔ How would you like to use ESLint? · style ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · react ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · browser ✔ How would you like to define a style for your project? · guide ✔ Which style guide do you want to follow? · standard-with-typescript ✔ What format do you want your config file to be in? · JavaScript Checking peerDependencies of eslint-config-standard-with-typescript@latest Local ESLint installation not found. The config that you've selected requires the following dependencies: eslint-plugin-react@latest eslint-config-standard-with-typescript@latest @typescript-eslint/eslint-plugin@^5.43.0 eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 typescript@* ✔ Would you like to install them now? · No / Yes ✔ Which package manager do you want to use? · npm Installing eslint-plugin-react@latest, eslint-config-standard-with-typescript@latest, @typescript-eslint/eslint-plugin@^5.43.0, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0, eslint-plugin-promise@^6.0.0, typescript@* npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslint [#################.] / reify:object-inspect: timing reifyNode:node_modules/eslint-pl |
導入したパッケージ、.eslintrc.cjsの確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:react/recommended', 'standard-with-typescript' ], overrides: [ ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, plugins: [ 'react' ], rules: { } } |
下記のコマンドを実行して、チェックを開始します。
|
1 |
$ npx eslint . --ext .js,.jsx,.ts,.tsx |
