prettier format instance with cli itself #55
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rin-st
approved these changes
Jun 17, 2024
rin-st
reviewed
Jun 17, 2024
rin-st
reviewed
Jun 17, 2024
carletex
reviewed
Jun 17, 2024
|
Just update the changes inline with this discussion : #55 (comment) To test make sure your format on save is off and paste the following unformatted files in : copy this in `templates/base/packages/nextjs/app/page.tsx` (it has unsorted imports + unformatted space in const address):"use client";
import Link from "next/link";
import { useAccount } from "wagmi";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { Address } from "~~/components/scaffold-eth";
import type { NextPage } from "next";
const Home: NextPage = () => {
const { address: connectedAddress } = useAccount();
return (
<>
<div className="flex items-center flex-col flex-grow pt-10">
<div className="px-5">
<h1 className="text-center">
<span className="block text-2xl mb-2">Welcome to</span>
<span className="block text-4xl font-bold">Scaffold-ETH 2</span>
</h1>
<div className="flex justify-center items-center space-x-2">
<p className="my-2 font-medium">Connected Address:</p>
<Address address={connectedAddress} />
</div>
<p className="text-center text-lg">
Get started by editing{" "}
<code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
packages/nextjs/app/page.tsx
</code>
</p>
<p className="text-center text-lg">
Edit your smart contract{" "}
<code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
YourContract.sol
</code>{" "}
in{" "}
<code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
packages/hardhat/contracts
</code>
</p>
</div>
<div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
<div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<BugAntIcon className="h-8 w-8 fill-secondary" />
<p>
Tinker with your smart contract using the{" "}
<Link href="/debug" passHref className="link">
Debug Contracts
</Link>{" "}
tab.
</p>
</div>
<div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
<MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
<p>
Explore your local transactions with the{" "}
<Link href="/blockexplorer" passHref className="link">
Block Explorer
</Link>{" "}
tab.
</p>
</div>
</div>
</div>
</div>
</>
);
};
export default Home;Copy this in hardhat template YourContract.sol (unformatted solidity code)//SPDX-License-Identifier: MIT
pragma solidity >=0.8.0 <0.9.0;
// Useful for debugging. Remove when deploying to a live network.
import "hardhat/console.sol";
// Use openzeppelin to inherit battle-tested implementations (ERC20, ERC721, etc)
// import "@openzeppelin/contracts/access/Ownable.sol";
/**
* A smart contract that allows changing a state variable of the contract and tracking the changes
* It also allows the owner to withdraw the Ether in the contract
* @author BuidlGuidl
*/
contract YourContract {
// State Variables
address public immutable owner;
string public greeting = "Building Unstoppable Apps!!!";
bool public premium = false;
uint256 public totalCounter = 0;
mapping(address => uint) public userGreetingCounter;
// Events: a way to emit log statements from smart contract that can be listened to by external parties
event GreetingChange(address indexed greetingSetter,string newGreeting,
bool premium,
uint256 value
);
// Constructor: Called once on contract deployment
// Check packages/hardhat/deploy/00_deploy_your_contract.ts
constructor(address _owner) {owner = _owner;
}
// Modifier: used to define a set of rules that must be met before or after a function is executed
// Check the withdraw() function
modifier isOwner() {
// msg.sender: predefined variable that represents address of the account that called the current function
require(msg.sender == owner, "Not the Owner");
_;
}
/**
* Function that allows anyone to change the state variable "greeting" of the contract and increase the counters
*
* @param _newGreeting (string memory) - new greeting to save on the contract
*/
function setGreeting(string memory _newGreeting) public payable {
// Print data to the hardhat chain console. Remove when deploying to a live network.
console.log(
"Setting new greeting '%s' from %s",
_newGreeting,
msg.sender
);
// Change state variables
greeting = _newGreeting;
totalCounter += 1;
userGreetingCounter[msg.sender] += 1;
// msg.value: built-in global variable that represents the amount of ether sent with the transaction
if (msg.value > 0) {
premium = true;
} else {
premium = false;
}
// emit: keyword used to trigger an event
emit GreetingChange(msg.sender, _newGreeting, msg.value > 0, msg.value);
}
/**
* Function that allows the owner to withdraw all the Ether in the contract
* The function can only be called by the owner of the contract as defined by the isOwner modifier
*/
function withdraw() public isOwner {
(bool success, ) = owner.call{ value: address(this).balance }("");
require(success, "Failed to send Ether");
}
/**
* Function that allows the contract to receive ETH
*/
receive() external payable {}
}
Now run : yarn cli ../test-hardhat --skip-install -s hardhatLook at To test Foundry simply run : yarn cli ../test-foundry --skip-install -s foundryAnd then run : cd ../test-foundry && forge fmt --root packages/foundrythen do |
|
GJ! Foundry works well, but getting this error for hardhat. Details
Looks like because of this change fd3b4be |
rin-st
reviewed
Jun 26, 2024
Ohh thanks Rinat! Fixed at 4e982ae Btw I noticed a small bug too if you do yarn cli ../test-hardhat --skip-install -s hardhatAnd then After this if you run |
Umm not sure how to tackle this issue nicely :( seems like the difference because of all eslint prettier thing? Seems like we get different formatting in SE-2 (where we are using eslint & prettier at same time) Even tried tinkering with https://github.com/prettier/prettier-eslint-cli#readme but no good luck since its not allowing to pass plugins :( also not able to get the above thing solved as well The different formatting seems like because of prettier/prettier-eslint#182 |
|
Problem is that Btw, maybe change it to latest upd. It adds warnings for import-order, checking it |
|
adding plugin explicitly to |
TYSM Rinat 🙏!!! Works nicely!! As I understand CLI was formatting correctly but since SE-2 prettier was bit lower it slightly formatted the code wrongly Will create an PR at SE-2 to updating prettier version and then we can backmerge those changes to CLI and this branch too 🙌 |
|
Just tested out everything and all seems to work as expected, Merging this! Thanks all! |
This was referenced Jun 28, 2024
This was referenced Jul 9, 2024
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context :
Previously we were running
yarn formatto format files on instance created. The down side that approach was if user skips the install step we were not able to doyarn formatThe reason we need to format file is mainly because of
.template.mjs. If we don't do that people would get warning like thisSummary of this PR :
Instead of relying on prettier which is installed in instance project we kept prettier as main dependency in CLI and format
.template.mjsin CLI itself before outputting them to instance project.yarn cli -e subgraphyarn next:lintthere shouldn't be any warnings, especially inScaffoldEthProvider.tsxsince their we are appending import at last but they are properly formatter by cli after template is processed.forge fmt. Also updatedfoundry.tomlconfig such thatforge fmtis very similar to SE-2 hardhat format styling. The reason I say similar is because there is no one to one mapping from prettier-solidity => foundry formatter there are some slight small difference.Some future improvements:
Currently in this PR I am using hardhat prettier config to format foundry solidity files, as mentioned earlier its very similar but not same.
So if you select foundry and once the project instance is created, if you cd in {projectsInstance/pacakges/foundry} and run
forge fmtyou will see a git diff due.Example :
To solve this and also better solution for #42 is:
Instead of notifying the user that he need's to install forge in outromessage, we do an early check if forge is present or not (just after user selects solidity framework) and exit the cli as soon as the forge is not present and foundry was choosen.
Doing above will solve two problems:
git submodule packageNameUntracked changes foundry #42 commands and instead leverageforge install pacakgeNamewhich is more reliable and fast.