Detailed example of vue-cli vscode configuration eslint-JS Tutorial-php.cn

Vue-cli is a scaffolding tool for Vue. In this article, we mainly share with you vue-cli vscode configuration eslint, hoping to help everyone.

Effect

Can display non-compliant prompt information in vscode in real time
You can format all non-compliant code by runningnpm run lintand list all code that needs to be manually Modified code errors and positioning
You can customize the specification [The default specification JavaScript Standard Style recommended by eslint]

You can pass /*eslint-disable */ to prevent the following code from accepting code specification checks and pass /*eslint-enable */ Let the following code re-accept the code specification check and pass // eslint-disable-line no- undef Let a certain line of code not accept specification checking and may have undefined variables

How to configure

Mainly includes vscode plug-in installation and configuration and command line plug-in installation and configuration

step1 vscode plug-in installation and configuration

Search for ESlint in vscode and install it
Add the following code to the user settings of vscode:

// 自动识别文件类型
 "emmet.syntaxProfiles": {
 "vue-html": "html",
 "vue": "html"
 },
 "eslint.autoFixOnSave": false,
 // 要lint的语言
 "eslint.validate": [
 "javascript",
 "javascriptreact",
 "html",
 "vue",
 {
 "language": "vue",
 "autoFix": true
 }
 ],
 "eslint.options": {
 "plugins": [
 "html"
 ]
 }

Copy after login

Create a neweslintrc.jsonfile in the project root directory and add the following code:

{
 "root": true,
 "parserOptions": {
 "sourceType": "module"
 },
 "env": {
 "browser": true,
 "es6": true
 },
 "extends": "eslint:recommended",
 "plugins": [
 "html"
 ],
 "rules": {
 "accessor-pairs": 2,
 "arrow-spacing": [2, {
 "before": true,
 "after": true
 }],
 "block-spacing": [2, "always"],
 "brace-style": [2, "1tbs", {
 "allowSingleLine": true
 }],
 "camelcase": [0, {
 "properties": "always"
 }],
 "comma-dangle": [2, "never"],
 "comma-spacing": [2, {
 "before": false,
 "after": true
 }],
 "comma-style": [2, "last"],
 "constructor-super": 2,
 "curly": [2, "multi-line"],
 "dot-location": [2, "property"],
 "eol-last": 2,
 // "eqeqeq": [2, "allow-null"],
 "eqeqeq": 0,
 "generator-star-spacing": [2, {
 "before": true,
 "after": true
 }],
 "handle-callback-err": [2, "^(err|error)$"],
 "indent": [2, 2, {
 "SwitchCase": 1
 }],
 "jsx-quotes": [2, "prefer-single"],
 "key-spacing": [2, {
 "beforeColon": false,
 "afterColon": true
 }],
 "keyword-spacing": [2, {
 "before": true,
 "after": true
 }],
 "new-cap": [2, {
 "newIsCap": true,
 "capIsNew": false
 }],
 "new-parens": 2,
 "no-array-constructor": 2,
 "no-caller": 2,
 "no-console": "off",
 "no-class-assign": 2,
 "no-cond-assign": 2,
 "no-const-assign": 2,
 "no-control-regex": 0,
 "no-delete-var": 2,
 "no-dupe-args": 2,
 "no-dupe-class-members": 2,
 "no-dupe-keys": 2,
 "no-duplicate-case": 2,
 "no-empty-character-class": 2,
 "no-empty-pattern": 2,
 "no-eval": 2,
 "no-ex-assign": 2,
 "no-extend-native": 2,
 "no-extra-bind": 2,
 "no-extra-boolean-cast": 2,
 "no-extra-parens": [2, "functions"],
 "no-fallthrough": 2,
 "no-floating-decimal": 2,
 "no-func-assign": 2,
 "no-implied-eval": 2,
 "no-inner-declarations": [2, "functions"],
 "no-invalid-regexp": 2,
 "no-irregular-whitespace": 2,
 "no-iterator": 2,
 "no-label-var": 2,
 "no-labels": [2, {
 "allowLoop": false,
 "allowSwitch": false
 }],
 "no-lone-blocks": 2,
 "no-mixed-spaces-and-tabs": 2,
 "no-multi-spaces": 2,
 "no-multi-str": 2,
 "no-multiple-empty-lines": [2, {
 "max": 1
 }],
 "no-native-reassign": 2,
 "no-negated-in-lhs": 2,
 "no-new-object": 2,
 "no-new-require": 2,
 "no-new-symbol": 2,
 "no-new-wrappers": 2,
 "no-obj-calls": 2,
 "no-octal": 2,
 "no-octal-escape": 2,
 "no-path-concat": 2,
 "no-proto": 2,
 "no-redeclare": 2,
 "no-regex-spaces": 2,
 "no-return-assign": [2, "except-parens"],
 "no-self-assign": 2,
 "no-self-compare": 2,
 "no-sequences": 2,
 "no-shadow-restricted-names": 2,
 "no-spaced-func": 2,
 "no-sparse-arrays": 2,
 "no-this-before-super": 2,
 "no-throw-literal": 2,
 "no-trailing-spaces": 2,
 "no-undef": 2,
 "no-undef-init": 2,
 "no-unexpected-multiline": 2,
 "no-unmodified-loop-condition": 2,
 "no-unneeded-ternary": [2, {
 "defaultAssignment": false
 }],
 "no-unreachable": 2,
 "no-unsafe-finally": 2,
 "no-unused-vars": [2, {
 "vars": "all",
 "args": "none"
 }],
 "no-useless-call": 2,
 "no-useless-computed-key": 2,
 "no-useless-constructor": 2,
 "no-useless-escape": 0,
 "no-whitespace-before-property": 2,
 "no-with": 2,
 "one-var": [2, {
 "initialized": "never"
 }],
 "operator-linebreak": [2, "after", {
 "overrides": {
 "?": "before",
 ":": "before"
 }
 }],
 "padded-blocks": [2, "never"],
 "quotes": [2, "single", {
 "avoidEscape": true,
 "allowTemplateLiterals": true
 }],
 "semi": [2, "never"],
 "semi-spacing": [2, {
 "before": false,
 "after": true
 }],
 "space-before-blocks": [2, "always"],
 "space-before-function-paren": [2, "never"],
 "space-in-parens": [2, "never"],
 "space-infix-ops": 2,
 "space-unary-ops": [2, {
 "words": true,
 "nonwords": false
 }],
 "spaced-comment": [2, "always", {
 "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
 }],
 "template-curly-spacing": [2, "never"],
 "use-isnan": 2,
 "valid-typeof": 2,
 "wrap-iife": [2, "any"],
 "yield-star-spacing": [2, "both"],
 "yoda": [2, "never"],
 "prefer-const": 2,
 "object-curly-spacing": [2, "always", {
 "objectsInObjects": false
 }],
 "array-bracket-spacing": [2, "never"]
 }
}

Copy after login

step2 Installation and configuration of command line plug-in

1.in the project root directory package.jsonAdd the following code to the file:
scriptsNext:

"lint": "eslint --fix --ext .js,.vue src"

Copy after login

and
devDependenciesunder:

"eslint": "^3.19.0",
"eslint-plugin-vue": "^2.1.0",

Copy after login

Run in the project root directory terminalcnpm i
##done.

Related recommendations:

How to use vue-cli to develop multi-page applications

How Use vue-cli to build vue projects and webpack?

Summary related examples about Vue-cli

The above is the detailed content of Detailed example of vue-cli vscode configuration eslint. For more information, please follow other related articles on the PHP Chinese website!