diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 9ba7974e4e6..1ffabe5b2bb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -89,24 +89,52 @@ Our code base is written in TypeScript and must adhere to specific conventions a ## Getting a development environment set up -An installation of Node is required for development. If you don't have Node installed, we recommend [Volta], which will automatically use the Node versions we pinned in `package.json`. We also recommend installing the following extensions in your editor of choice: TypeScript, TailwindCSS, ESLint, Stylelint, and Prettier. If you use VS Code, you will see a pop up in the bottom right corner prompting you to install or view the workspaces's recommended extensions. Here are instructions for manually installing the extensions in a variety of editors: +An installation of Node is required for development. If you don't have Node installed, we recommend [Volta](https://docs.volta.sh/guide/getting-started), which will automatically use the Node/NPM versions pinned at the bottom of [`package.json`](./package.json). If you prefer a different Node version manager, make sure to use the major versions of Node/NPM specified in [`package.json`](./package.json). + +We also recommend installing the following extensions in your editor of choice: TypeScript, TailwindCSS, ESLint, Stylelint, and Prettier. If you use VS Code, you will see a pop up in the bottom right corner prompting you to install or view the workspaces's recommended extensions. Here are instructions for manually installing the extensions in a variety of editors: - https://tailwindcss.com/docs/intellisense - https://eslint.org/docs/latest/user-guide/integrations - https://stylelint.io/user-guide/integrations/editor - https://prettier.io/docs/en/editors.html -The first time installing dependencies, you need to use the `--legacy-peer-deps` flag due to an ESLint dependency conflict. The conflict won't affect the components since ESLint is only in `devDependencies`. Hopefully this will no longer be an issue once [`@stencil/eslint-plugin`](https://github.com/ionic-team/stencil-eslint) supports ESLint v8. +If your IDE supports the [Language Server Protocol (LSP) specification](https://microsoft.github.io/language-server-protocol/) but isn't mentioned in the links above, ask Ben for help getting set up. + +## Starting the demos + +First, clone the repo and install the NPM dependencies from within the `calcite-components` directory: ```sh -npm install --legacy-peer-deps +git clone git@github.com:Esri/calcite-components.git +cd calcite-components +npm install ``` -To start the local development environment, run `npm start`, which will start the local Stencil development server on localhost. You can modify the [index.html](./src/index.html) to add and test your new component. Just add another HTML file to the `demos` folder and link to this new page from `index.html`. +> **NOTE** +> +> The first time installing dependencies, you may need to use the `legacy-peer-deps` flag due to an Stencil/ESLint dependency conflict: +> +> ```sh +> npm install --legacy-peer-deps +> ``` +> +> Hopefully this will no longer be an issue once [`@stencil/eslint-plugin`](https://github.com/ionic-team/stencil-eslint) supports ESLint v8. + +Next, start the local Stencil development server on localhost: + +```sh +npm start +``` + +The demos will open in the browser after building. Edit the pages in [`src/demos`](./src/demos) to modify the component demos, such as changing attributes or adding content to slots. When adding a new demo page, make sure to add a link in [`index.html`](./src/index.html) so others can find it. You can also edit the component code in [`src/components`](./src/components), and the changes will be reflected in the demos. ## Linting -This project uses [lint-staged](https://www.npmjs.com/package/lint-staged) to automatically format code on commit, making it easier to contribute. +This project uses [lint-staged](https://www.npmjs.com/package/lint-staged) to automatically format code on commit, making it easier to contribute. There are also NPM scripts in [`package.json`](./package.json) to lint a variety of filetypes. To run them all: + +```sh +npm run lint +``` ## Running the tests