mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Documentation and linting updates
This commit is contained in:
Damian Mooyman
parent
dcaef006bd
commit
23b92c8187
@ -4,7 +4,7 @@ files:
|
||||
ignore:
|
||||
- 'client/src/styles/legacy/*'
|
||||
- 'admin/client/src/styles/legacy/*'
|
||||
- 'src/Dev/**/*'
|
||||
- 'src/**/*'
|
||||
options:
|
||||
formatter: stylish
|
||||
merge-default-rules: false
|
||||
|
||||
@ -5,9 +5,9 @@ but there's no way to add new sprites to the system.
|
||||
*Original Instructions (no longer valid)*
|
||||
|
||||
We use sprites to handle various icons and images throughout the CMS. These are automatically generated
|
||||
by running `npm run build` and can be found at `/admin/client/src/sprites/dist`. To add new
|
||||
by running `yarn run build` and can be found at `/admin/client/src/sprites/dist`. To add new
|
||||
images to the sprites, simply add the image to the folder matching the image's size in
|
||||
`/admin/client/sprites` then run `npm run sprites` to generate the sprite containing your image.
|
||||
`/admin/client/sprites` then run `yarn run build` to generate the sprite containing your image.
|
||||
Along with the new sprite containing your image, there will also be a new variable in
|
||||
`/admin/client/styles/legacy/_sprites.scss` which you can use in your .scss file by first extending the class matching
|
||||
the sprite (eg `@extend .icon-sprites-32x32;`), and then including your image using the variable
|
||||
|
||||
@ -41,7 +41,7 @@ Check our [build tooling](/contributing/build_tooling) docs for more details.
|
||||
|
||||
|
||||
```
|
||||
(cd framework && npm run build && npm run css)
|
||||
(cd framework && yarn run build && yarn run css)
|
||||
```
|
||||
|
||||
## Coding Conventions
|
||||
@ -504,7 +504,7 @@ to all elements with the class `.ss-ui-button`. We've extended the jQuery UI wid
|
||||
to support defining icons via HTML5 data attributes (see `ssui.core.js`).
|
||||
These icon identifiers relate to icon files in `framework/admin/images/sprites/src/btn-icons`,
|
||||
and are sprited into a single file through SCSS and [sprity](https://www.npmjs.com/package/sprity)
|
||||
(sprites are compiled with `npm run sprites`). There are classes set up to show the correct sprite via
|
||||
(sprites are compiled with `yarn run build`). There are classes set up to show the correct sprite via
|
||||
background images (see `framework/admin/scss/_sprites.scss`).
|
||||
|
||||
Input: `<a href="..." class="ss-ui-button" data-icon="add" />Button text</a>`
|
||||
|
||||
@ -23,7 +23,10 @@ for instructions on how to get a compiler running on your platform.
|
||||
|
||||
[yarn](https://yarnpkg.com/) is the package manager we use for JavaScript dependencies.
|
||||
The configuration for an npm package goes in `package.json`.
|
||||
You'll need to install after [Node.js is installed](https://yarnpkg.com/en/docs/install), we recommend using `npm` which comes with Node.js to install it globally.
|
||||
You'll need to install yarn after Node.js is installed.
|
||||
See [yarn installation docs](https://yarnpkg.com/en/docs/install).
|
||||
We recommend using `npm` which comes with Node.js to install it globally.
|
||||
|
||||
```
|
||||
npm install -g yarn
|
||||
```
|
||||
@ -62,13 +65,13 @@ developers to install these tools globally. This means builds are much more cons
|
||||
across development environments.
|
||||
|
||||
To run an npm script, open up your terminal, change to the directory where `package.json`
|
||||
is located, and run `$ npm run <SCRIPT_NAME>`. Where `<SCRIPT_NAME>` is the name of the
|
||||
is located, and run `$ yarn run <SCRIPT_NAME>`. Where `<SCRIPT_NAME>` is the name of the
|
||||
script you wish to run.
|
||||
|
||||
### build
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
$ yarn run build
|
||||
```
|
||||
|
||||
Runs [Webpack](https://webpack.github.io/) to builds the core JavaScript files.
|
||||
@ -78,20 +81,22 @@ Run this script with `-- --watch` to automatically rebuild on file changes.
|
||||
The first `--` separator is required to separate arguments from NPM's own ones.
|
||||
|
||||
```
|
||||
$ npm run build -- --watch
|
||||
$ yarn run build -- --watch
|
||||
```
|
||||
|
||||
*For development only*:
|
||||
Run this to keep webpack automatically rebuilding your file changes, this will also include *.map files for easier debugging.
|
||||
It is important to note that this should not be used for pushing up changes, and you should run `npm run build` after you're done.
|
||||
Run this to keep webpack automatically rebuilding your file changes, this will also include *.map files
|
||||
for easier debugging. It is important to note that this should not be used for pushing up changes,
|
||||
and you should run `yarn run build` after you're done.
|
||||
|
||||
```
|
||||
$ npm run watch
|
||||
$ yarn run watch
|
||||
```
|
||||
|
||||
### css
|
||||
|
||||
```
|
||||
$ npm run css
|
||||
$ yarn run css
|
||||
```
|
||||
|
||||
Compiles all of the `.scss` files into minified `.css` files.
|
||||
@ -100,13 +105,13 @@ Run this script with `-- --watch` to automatically rebuild on file changes.
|
||||
The first `--` separator is required to separate arguments from NPM's own ones.
|
||||
|
||||
```
|
||||
$ npm run css -- --watch
|
||||
$ yarn run css -- --watch
|
||||
```
|
||||
|
||||
### lint
|
||||
|
||||
```
|
||||
$ npm run lint
|
||||
$ yarn run lint
|
||||
```
|
||||
|
||||
Run linters (`eslint` and `sass-lint`) linters to enforce
|
||||
@ -116,7 +121,7 @@ our [JavaScript](/contributing/javascript_coding_conventions) and
|
||||
### test
|
||||
|
||||
```
|
||||
$ npm run test
|
||||
$ yarn run test
|
||||
```
|
||||
|
||||
Runs the JavaScript unit tests.
|
||||
@ -124,24 +129,12 @@ Runs the JavaScript unit tests.
|
||||
### coverage
|
||||
|
||||
```
|
||||
$ npm run coverage
|
||||
$ yarn run coverage
|
||||
```
|
||||
|
||||
Generates a coverage report for the JavaScript unit tests. The report is generated
|
||||
in the `coverage` directory.
|
||||
|
||||
### lock
|
||||
|
||||
```
|
||||
$ npm run lock
|
||||
```
|
||||
|
||||
Generates a "shrinkwrap" file containing all npm package versions and writes it to
|
||||
`npm-shrinkwrap.json`. Run this command whenever a new package is added to `package.json`,
|
||||
or when updating packages. Commit the resulting `npm-shrinkwrap.json`. This uses a third party
|
||||
[npm-shrinkwrap](https://github.com/uber/npm-shrinkwrap) library
|
||||
since the built-in `npm shrinkwrap` (without a dash) has proven unreliable.
|
||||
|
||||
## Requiring SilverStripe ES6 Modules in your own CMS customisation
|
||||
|
||||
SilverStripe creates bundles which contain many dependencies you might also
|
||||
|
||||
@ -19,7 +19,7 @@ Check our [requirements](/getting_started/server_requirements) documentation.
|
||||
We follow the [AirBnB JavaScript Conventions](https://github.com/airbnb/javascript),
|
||||
as well as the [AirBnB React Conventions](https://github.com/airbnb/javascript/tree/master/react).
|
||||
A lot of their rules can be validated via [ESLint](http://eslint.org/),
|
||||
and can be checked locally via `npm run lint`.
|
||||
and can be checked locally via `yarn run lint`.
|
||||
|
||||
## Spelling
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ which highlight any linting errors right in your code.
|
||||
|
||||
We strongly recommend installing one of these into the editor of your choice, to
|
||||
avoid the frustration of failed pull requests. You can run the checks on console
|
||||
via `npm run lint`.
|
||||
via `yarn run lint`.
|
||||
|
||||
## File and Folder Naming
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user