npx create-react-app react-dapp
npm install ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers
npx hardhat
执行上述命令后，我面临以下问题
无法加载在“.eslintrc.js”中声明的插件“prettier”：找不到模块“eslint-plugin-prettier”需要堆栈：-/home/tahmid/latest_projects/Etherium/Etherium_Transactions/React_Etherium/react-dapp/node_modules/react -scripts/config/ placeholder.js引用自：/home/tahmid/latest_projects/Etherium/Etherium_Transactions/React_Etherium/react-dapp/.eslintrc.js
为了解决这个错误，我使用了以下 -
npm install --save-dev eslint-config-prettier
然后就出现了——
Failed to load plugin 'prettier' declared in '.eslintrc.js': Cannot find module
'eslint-plugin-prettier'
Require stack:
- /home/tahmid/latest_projects/Etherium/Etherium_Transactions/React_Etherium/react-
dapp/node_modules/react-scripts/config/__placeholder__.js
引用自：/home/tahmid/latest_projects/Etherium/Etherium_Transactions/React_Etherium/react-dapp/.eslintrc.js
为了解决它，"eslint": "^5.8.0",将此添加到我的 package.json 并执行此命令 -npm i eslint-plugin-prettier
然后发生了——
src/App.js
Line 1:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Line 1:18: Replace `'./logo.svg'` with `"./logo.svg"` prettier/prettier
Line 2:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Line 2:8: Replace `'./App.css'` with `"./App.css"` prettier/prettier
Line 25:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
src/index.js
Line 1:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Line 1:19: Replace `'react'` with `"react"` prettier/prettier
Line 2:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Line 2:22: Replace `'react-dom'` with `"react-dom"` prettier/prettier
Line 3:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Line 3:8: Replace `'./index.css'` with `"./index.css"` prettier/prettier
Line 4:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Line 4:17: Replace `'./App'` with `"./App"` prettier/prettier
Line 5:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Line 5:29: Replace `'./reportWebVitals'` with `"./reportWebVitals"` prettier/prettier
Line 11:27: Replace `'root'` with `"root"` prettier/prettier
src/reportWebVitals.js
Line 1:25: Replace `onPerfEntry` with `(onPerfEntry)` prettier/prettier
Line 3:12: Replace `'web-vitals'` with `"web-vitals"` prettier/prettier
Line 13:1: Import and export declarations are not supported yet node/no-unsupported-features/es-syntax
Search for the keywords to learn more about each error.
所以我安装了这个
npm i eslint-plugin-import
什么都没有改变
现在我完全不知道下一步该做什么
包.json
{
"name": "react-dapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"@nomiclabs/hardhat-ethers": "^2.0.2",
"@nomiclabs/hardhat-waffle": "^2.0.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"chai": "^4.3.4",
"eslint-plugin-prettier": "^4.0.0",
"ethereum-waffle": "^3.4.0",
"ethers": "^5.4.7",
"hardhat": "^2.6.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.31.2",
"@typescript-eslint/parser": "^4.31.2",
"eslint-config-prettier": "^8.3.0",
"standardx": "^3.0.0",
"ts-standard": "^10.0.0",
"eslint": "^5.8.0"
},
"ts-standard": {
"project": "./tsconfig.json"
}
}
eslint-plugin-prettier.js
> /** * @fileoverview Runs `prettier` as an ESLint rule. * @author
> Andres Suarez */
>
> 'use strict';
>
> //
> ------------------------------------------------------------------------------ // Requirements //
> ------------------------------------------------------------------------------
>
> const { showInvisibles, generateDifferences, } =
> require('prettier-linter-helpers');
>
> //
> ------------------------------------------------------------------------------ // Constants //
> ------------------------------------------------------------------------------
>
> const { INSERT, DELETE, REPLACE } = generateDifferences;
>
> //
> ------------------------------------------------------------------------------ // Privates //
> ------------------------------------------------------------------------------
>
> // Lazily-loaded Prettier. /** * @type {import('prettier')} */ let
> prettier;
>
> //
> ------------------------------------------------------------------------------ // Rule Definition //
> ------------------------------------------------------------------------------
>
> /** * Reports a difference. * @param
> {import('eslint').Rule.RuleContext} context - The ESLint rule context.
> * @param {import('prettier-linter-helpers').Difference} difference - The difference object. * @returns {void} */ function
> reportDifference(context, difference) { const { operation, offset,
> deleteText = '', insertText = '' } = difference; const range =
> [offset, offset + deleteText.length]; const [start, end] =
> range.map((index) =>
> context.getSourceCode().getLocFromIndex(index) );
>
> context.report({
> messageId: operation,
> data: {
> deleteText: showInvisibles(deleteText),
> insertText: showInvisibles(insertText),
> },
> loc: { start, end },
> fix: (fixer) => fixer.replaceTextRange(range, insertText), }); }
>
> //
> ------------------------------------------------------------------------------ // Module Definition //
> ------------------------------------------------------------------------------
>
> module.exports = { configs: {
> recommended: {
> extends: ['prettier'],
> plugins: ['prettier'],
> rules: {
> 'prettier/prettier': 'error',
> 'arrow-body-style': 'off',
> 'prefer-arrow-callback': 'off',
> },
> }, }, rules: {
> prettier: {
> meta: {
> docs: {
> url: 'https://github.com/prettier/eslint-plugin-prettier#options',
> },
> type: 'layout',
> fixable: 'code',
> schema: [
> // Prettier options:
> {
> type: 'object',
> properties: {},
> additionalProperties: true,
> },
> {
> type: 'object',
> properties: {
> usePrettierrc: { type: 'boolean' },
> fileInfoOptions: {
> type: 'object',
> properties: {},
> additionalProperties: true,
> },
> },
> additionalProperties: true,
> },
> ],
> messages: {
> [INSERT]: 'Insert `{{ insertText }}`',
> [DELETE]: 'Delete `{{ deleteText }}`',
> [REPLACE]: 'Replace `{{ deleteText }}` with `{{ insertText }}`',
> },
> },
> create(context) {
> const usePrettierrc =
> !context.options[1] || context.options[1].usePrettierrc !== false;
> const eslintFileInfoOptions =
> (context.options[1] && context.options[1].fileInfoOptions) || {};
> const sourceCode = context.getSourceCode();
> const filepath = context.getFilename();
> // Processors that extract content from a file, such as the markdown
> // plugin extracting fenced code blocks may choose to specify virtual
> // file paths. If this is the case then we need to resolve prettier
> // config and file info using the on-disk path instead of the virtual
> // path.
> const onDiskFilepath = context.getPhysicalFilename();
> const source = sourceCode.text;
>
> return {
> Program() {
> if (!prettier) {
> // Prettier is expensive to load, so only load it if needed.
> prettier = require('prettier');
> }
>
> const eslintPrettierOptions = context.options[0] || {};
>
> const prettierRcOptions = usePrettierrc
> ? prettier.resolveConfig.sync(onDiskFilepath, {
> editorconfig: true,
> })
> : null;
>
> const { ignored, inferredParser } = prettier.getFileInfo.sync(
> onDiskFilepath,
> Object.assign(
> {},
> { resolveConfig: true, ignorePath: '.prettierignore' },
> eslintFileInfoOptions
> )
> );
>
> // Skip if file is ignored using a .prettierignore file
> if (ignored) {
> return;
> }
>
> const initialOptions = {};
>
> // ESLint supports processors that let you extract and lint JS
> // fragments within a non-JS language. In the cases where prettier
> // supports the same language as a processor, we want to process
> // the provided source code as javascript (as ESLint provides the
> // rules with fragments of JS) instead of guessing the parser
> // based off the filename. Otherwise, for instance, on a .md file we
> // end up trying to run prettier over a fragment of JS using the
> // markdown parser, which throws an error.
> // Processors may set virtual filenames for these extracted blocks.
> // If they do so then we want to trust the file extension they
> // provide, and no override is needed.
> // If the processor does not set any virtual filename (signified by
> // `filepath` and `onDiskFilepath` being equal) AND we can't
> // infer the parser from the filename, either because no filename
> // was provided or because there is no parser found for the
> // filename, use javascript.
> // This is added to the options first, so that
> // prettierRcOptions and eslintPrettierOptions can still override
> // the parser.
> //
> // `parserBlocklist` should contain the list of prettier parser
> // names for file types where:
> // * Prettier supports parsing the file type
> // * There is an ESLint processor that extracts JavaScript snippets
> // from the file type.
> const parserBlocklist = [null, 'markdown', 'html'];
>
> let inferParserToBabel =
> parserBlocklist.indexOf(inferredParser) !== -1;
>
> if (
> // it could be processed by `@graphql-eslint/eslint-plugin` or `eslint-plugin-graphql`
> inferredParser === 'graphql' &&
> // for `eslint-plugin-graphql`, see https://github.com/apollographql/eslint-plugin-graphql/blob/master/src/index.js#L416
> source.startsWith('ESLintPluginGraphQLFile`')
> ) {
> inferParserToBabel = true;
> }
>
> if (filepath === onDiskFilepath && inferParserToBabel) {
> initialOptions.parser = 'babel';
> }
>
> const prettierOptions = Object.assign(
> {},
> initialOptions,
> prettierRcOptions,
> eslintPrettierOptions,
> { filepath }
> );
>
> // prettier.format() may throw a SyntaxError if it cannot parse the
> // source code it is given. Usually for JS files this isn't a
> // problem as ESLint will report invalid syntax before trying to
> // pass it to the prettier plugin. However this might be a problem
> // for non-JS languages that are handled by a plugin. Notably Vue
> // files throw an error if they contain unclosed elements, such as
> // `<template><div></template>. In this case report an error at the
> // point at which parsing failed.
> let prettierSource;
> try {
> prettierSource = prettier.format(source, prettierOptions);
> } catch (err) {
> if (!(err instanceof SyntaxError)) {
> throw err;
> }
>
> let message = 'Parsing error: ' + err.message;
>
> // Prettier's message contains a codeframe style preview of the
> // invalid code and the line/column at which the error occurred.
> // ESLint shows those pieces of information elsewhere already so
> // remove them from the message
> if (err.codeFrame) {
> message = message.replace(`\n${err.codeFrame}`, '');
> }
> if (err.loc) {
> message = message.replace(/ \(\d+:\d+\)$/, '');
> }
>
> context.report({ message, loc: err.loc });
>
> return;
> }
>
> if (source !== prettierSource) {
> const differences = generateDifferences(source, prettierSource);
>
> for (const difference of differences) {
> reportDifference(context, difference);
> }
> }
> },
> };
> },
> }, }, };
应用程序.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;