Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moved general information to the top document #749

Closed
wants to merge 2 commits into from
Closed

Moved general information to the top document #749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
286fd67
Moved general information about Javascript to the top of the document…
HoffmannP Sep 18, 2023
6be94e8
Resolve link error
BerengarWLehr Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 49 additions & 1 deletion docs/guides/javascript/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -552,4 +552,52 @@ grunt
</TabItem>
</Tabs>

### ESLint
### JSHint
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We dont' actually use jshint any more. It is used by YUI but we don't useit, which is why it doesn't appear in this guide.

We will be removing YUI in the next 18-24 months (all being well) and will then only make use of eslint.


[JSHint](http://jshint.com) is a JSLint derivative for checking your code. This includes checking for errors and recommended stylistic approaches to writing JavaScript.

Since Moodle 2.5, a JSHint configuration is also included in the Moodle codebase to inform the tester of our preferences and recommendations.

#### Use

Many IDEs and editors will automatically detect if you have JSHint installed and pass your code through it for you, reporting any errors as you go.

To run jshint on the command line, simply pass it the file that you wish to check:

```bash
npx jshint blocks/fruit/yui/fruitbowl/fruitbowl.js
```

#### Documentation

There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:

- [JSHint](http://jshint.com)
- [JSLint Error Explanations](http://jslinterrors.com)

## Moodle Settings for JavaScript Development

The following settings will ensure that the js loaded by your browser is relatively readable.

Make sure that :

- your Development / Debugging / Debug messages is set to "Developer : Extra Debug Moodle Messages ...." - Moodle will then use the debug non-minified and thus more readable YUI 2 and YUI 3 library files.
- You will probably want to change some of the settings at "Home / Site administration / Appearance / AJAX and JavaScript" :
- YUI combo loading - you probably want to turn this off so that files are not combined.
- JavaScript caching and compressing - turn this off so that your custom JS code is not minified.
- Check the other settings on this page to see that they are as you would expect them to be.

You might want to add the following code to your config.php file when developing or debugging JavaScript code:

```php
// For javascript development or debugging.
$CFG->cachejs = false;
$CFG->yuicomboloading = false;
$CFG->yuiloglevel = 'debug';
$CFG->debug = 32767;
```

## See Also

- [JavaScript Modules](modules.md)
- [JavaScript FAQ](https://docs.moodle.org/dev/JavaScript_FAQ)
73 changes: 1 addition & 72 deletions docs/guides/javascript/yui/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,75 +99,4 @@ Some good books:

## Useful tools

JavaScript authoring have moved along considerably in recent years, and we highly recommend that you look at using some of the available tools to help you in your development. Most of these tools are available through [Node.js](http://nodejs.org) which is relatively trivial to install on most operating systems:

### Grunt

Moodle uses [Grunt](../index.md#grunt) for most JavaScript management. We recommend reading our Grunt documentation for further information on the available commands.

#### Use

There are several ways to use `grunt`.

During development, we recommend you run grunt in _watch_ mode:

```bash
npx grunt watch
```

To build all YUI modules across Moodle you can call `grunt` by running the following command from the root directory:

```bash
npx grunt yui
```

### JSHint

[JSHint](http://jshint.com) is a JSLint derivative for checking your code. This includes checking for errors and recommended stylistic approaches to writing JavaScript.

Since Moodle 2.5, a JSHint configuration is also included in the Moodle codebase to inform the tester of our preferences and recommendations.

#### Use

Many IDEs and editors will automatically detect if you have JSHint installed and pass your code through it for you, reporting any errors as you go.

To run jshint on the command line, simply pass it the file that you wish to check:

```bash
npx jshint blocks/fruit/yui/fruitbowl/fruitbowl.js
```

#### Documentation

There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:

- [JSHint](http://jshint.com)
- [JSLint Error Explanations](http://jslinterrors.com)

## Moodle Settings for JavaScript Development

The following settings will ensure that the js loaded by your browser is relatively readable.

Make sure that :

- your Development / Debugging / Debug messages is set to "Developer : Extra Debug Moodle Messages ...." - Moodle will then use the debug non-minified and thus more readable YUI 2 and YUI 3 library files.
- You will probably want to change some of the settings at "Home / Site administration / Appearance / AJAX and JavaScript" :
- YUI combo loading - you probably want to turn this off so that files are not combined.
- JavaScript caching and compressing - turn this off so that your custom JS code is not minified.
- Check the other settings on this page to see that they are as you would expect them to be.

You might want to add the following code to your config.php file when developing or debugging JavaScript code:

```php
// For javascript development or debugging.
$CFG->cachejs = false;
$CFG->yuicomboloading = false;
$CFG->yuiloglevel = 'debug';
$CFG->debug = 32767;
```

## See Also

- [JavaScript Modules](../modules.md)
- [jQuery](../jquery/index.md)
- [JavaScript FAQ](https://docs.moodle.org/dev/JavaScript_FAQ)
The usefull hints you previously found here are moved to [another place](https://moodledev.io/docs/guides/javascript#tools)