ℹ️ Full documentation can be found Here
This is a Frontastic starter project that uses Next.js
yarn install
yarn dev
yarn install
yarn build
yarn start
export default function MyComponent(props) {
return <h1>{props.headline}</h1>;
}
- Create a
schema.json
{
"tasticType": "my-component",
"name": "My Component",
"icon": "favorite",
"category": "Content",
"schema": [
{
"name": "Basic Options",
"fields": [
{
"label": "Headline",
"field": "headline",
"type": "string",
"required": true
}
]
}
]
}
- Create an
index.tsx
export default function MyComponentTastic(props) {
return <MyComponent headline={props.data.headline} />;
}
You can find more about tastics Here
export const tastics = {
...
'my-component': MyComponentTastic
}
This project uses linting rules that improve the Core Web Vitals of frontastic storefront which are also the recommended rules by Next.js.
In addition, the following rules are included as well to get reasonable defaults:
eslint:recommended
plugin:react/recommended
see eslint-plugin-react
plugin:react-hooks/recommended
see eslint-plugin-react-hooks
If you want more fine-grained configuration, all of the above can be configured,
deactivated and/or extended in the .eslintrc.json
in the project root folder.
To run the linter, just run
yarn lint
To fix erros that can be automatically fixed, run
yarn lint --fix
We recommend to add linting directly to your code editor or development environment, to get immediate feedback.
There are a variety of extensions that can add linting support to vim and Neovim. If you're using vim, we recommend either ALE or CoC and if you use Neovim you can use the integrated Language Server Protocol to run eslint_d in the background. Here's a handy guide on how to do that
To integrate ESLint into Visual Studio Code, you will need to install the ESLint extension for Visual Studio Code. Search for ESLint in the Extensions tab and click Install once you have located the extension. Once ESLint is installed in Visual Studio Code, you’ll notice colorful underlining in your JS/TS files highlighting errors. These markers are color-coded based on severity. If you hover over your underlined code, you will see a message that explains the error to you.
We also recommend to setup your editor to use prettier to format a document on save.
To prettify your code, just run
yarn prettify
To run linter with --fix
flag and also prettify your code, you can run
yarn fix
This is typically equivalent to running yarn lint --fix
and yarn prettify