mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-11 22:08:05 +08:00
f45a57178a
* Add support to x vversion from npm * Add support to x vversion from npm * Add support to x vversion from npm * Add documentation for current repository
78 lines
3.4 KiB
Markdown
Executable File
78 lines
3.4 KiB
Markdown
Executable File
# ESLint
|
|
|
|
Whether it's a multi-person collaboration or personal projects, code specifications are important. It can not only avoids basic syntax errors, but also ensures the readability of the code.
|
|
|
|
## Config
|
|
|
|
All configuration files are in [.eslintrc.js](https://github.com/adempiere/adempiere-vue/blob/master/.eslintrc.js).
|
|
The basic eslint rules of this project is based on the official eslint rules of vue [eslint-config-vue](https://github.com/vuejs/eslint-config-vue) but made minor changes. You can customize your configuration according to your needs.
|
|
|
|
Such as: my personal or project team is accustomed to using two spaces, but you may feel that the four spaces are more pleasing, and you can make the following changes.
|
|
|
|
Enter the project of `.eslintrc.js`, find `indent`,and then set it to `4` 。There are a variety of configuration information, see details [ESLint Document](https://eslint.org/docs/rules/)。
|
|
|
|
After [v3.8.1](https://github.com/adempiere/adempiere-vue/releases/tag/v3.8.1), [eslint-plugin-vue](https://github.Com/vuejs/eslint-plugin-vue) has been added to better verify vue related code.
|
|
|
|
By default, the most restrictive config `plugin:vue/recommended` is used to verify the code. If you think it is too strict, you can modify it yourself.
|
|
|
|
```js
|
|
// https://github.com/adempiere/adempiere-vue/blob/master/.eslintrc.js
|
|
|
|
module.exports = {
|
|
extends: ['plugin:vue/recommended', 'eslint:recommended']
|
|
//You can change it to extends: ['plugin:vue/essential', 'eslint:recommended']
|
|
}
|
|
```
|
|
|
|
## Cancel ESLint
|
|
|
|
If you don't want to use ESLint (not recommended for cancellation), just find the [vue.config.js](https://github.com/adempiere/adempiere-vue/blob/master/vue.config.js) file.
|
|
Make the following settings `lintOnSave: false`.
|
|
|
|
## Configure ESLint in vscode
|
|
|
|
Sharp tools make good work! Personally recommend eslint+vscode to write VUE, there is definitely a very cool
|
|
|
|
|
|
<br/>
|
|
|
|
Every time you save your code, vscode will be able to mark red areas that do not conform to the eslint rules, and make some simple self-fixes at the same time. The installation steps are as follows:
|
|
|
|
First install the eslint plugin
|
|
|
|
|
|
After we have installed ESLint, we back to VSCode to set up . Go to `Code` > `Preferences` > `Settings` and add the following configuration.
|
|
|
|
```json
|
|
{
|
|
"files.autoSave": "off",
|
|
"eslint.validate": [
|
|
"javascript",
|
|
"javascriptreact",
|
|
"vue-html",
|
|
{
|
|
"language": "vue",
|
|
"autoFix": true
|
|
}
|
|
],
|
|
"eslint.run": "onSave",
|
|
"eslint.autoFixOnSave": true
|
|
}
|
|
```
|
|
|
|
Everyone and the team have their own code specification, unification is good, to create their own eslint rules and upload it to the npm will be fun. Such as ElemeFE [config](https://www.npmjs.com/package/eslint-config-elemefe) or Vue official [config](https://github.com/vuejs/eslint-config-vue).
|
|
|
|
[vscode plugin and configuration recommendations](https://github.com/varHarrie/Dawn-Blossoms/issues/10)
|
|
|
|
## More configuration
|
|
|
|
Since this project is built based on `vue-cli`, more configuration can be found in the official [documentation](https://cli.vuejs.org/en/config/#lintonsave)
|
|
|
|
## Auto fix
|
|
|
|
```bash
|
|
npm run lint -- --fix
|
|
```
|
|
|
|
Running the above command, eslint will automatically fix some simple errors.
|