vscode에서 실시간으로 비준수 프롬프트 정보를 표시할 수 있습니다.
<code><span style="font-size: 14px;">npm run lint</span>
格式化所有不符合规范的代码,并列出所有需手动修改的代码错误及定位
可以定制规范【默认用的是eslint推荐的规范JavaScript Standard Style】
可以通过<span style="font-size: 14px;">/*eslint-disable */</span>
让下面的代码不接受代码规范检查、通过<span style="font-size: 14px;">/*eslint-enable */</span>
让下面的代码重新接受代码规范检查、通过<span style="font-size: 14px;">// eslint-disable-line no-undef</span>
让某行代码不接受规范检查以及可以有未定义的变量
主要包括vscode的插件安装及配置和命令行插件的安装及配置
在vscode中搜索ESlint并安装
在vscode的用户设置中加入如下代码:
<span style="font-size: 14px;">// 自动识别文件类型<br> "emmet.syntaxProfiles": {<br> "vue-html": "html",<br> "vue": "html"<br> },<br> "eslint.autoFixOnSave": false,<br> // 要lint的语言<br> "eslint.validate": [<br> "javascript",<br> "javascriptreact",<br> "html",<br> "vue",<br> {<br> "language": "vue",<br> "autoFix": true<br> }<br> ],<br> "eslint.options": {<br> "plugins": [<br> "html"<br> ]<br> }<br></span>
在项目根目录下新建<span style="font-size: 14px;">eslintrc.json</span>
文件并加入如下代码:
<span style="font-size: 14px;">{<br> "root": true,<br> "parserOptions": {<br> "sourceType": "module"<br> },<br> "env": {<br> "browser": true,<br> "es6": true<br> },<br> "extends": "eslint:recommended",<br> "plugins": [<br> "html"<br> ],<br> "rules": {<br> "accessor-pairs": 2,<br> "arrow-spacing": [2, {<br> "before": true,<br> "after": true<br> }],<br> "block-spacing": [2, "always"],<br> "brace-style": [2, "1tbs", {<br> "allowSingleLine": true<br> }],<br> "camelcase": [0, {<br> "properties": "always"<br> }],<br> "comma-dangle": [2, "never"],<br> "comma-spacing": [2, {<br> "before": false,<br> "after": true<br> }],<br> "comma-style": [2, "last"],<br> "constructor-super": 2,<br> "curly": [2, "multi-line"],<br> "dot-location": [2, "property"],<br> "eol-last": 2,<br> // "eqeqeq": [2, "allow-null"],<br> "eqeqeq": 0,<br> "generator-star-spacing": [2, {<br> "before": true,<br> "after": true<br> }],<br> "handle-callback-err": [2, "^(err|error)$"],<br> "indent": [2, 2, {<br> "SwitchCase": 1<br> }],<br> "jsx-quotes": [2, "prefer-single"],<br> "key-spacing": [2, {<br> "beforeColon": false,<br> "afterColon": true<br> }],<br> "keyword-spacing": [2, {<br> "before": true,<br> "after": true<br> }],<br> "new-cap": [2, {<br> "newIsCap": true,<br> "capIsNew": false<br> }],<br> "new-parens": 2,<br> "no-array-constructor": 2,<br> "no-caller": 2,<br> "no-console": "off",<br> "no-class-assign": 2,<br> "no-cond-assign": 2,<br> "no-const-assign": 2,<br> "no-control-regex": 0,<br> "no-delete-var": 2,<br> "no-dupe-args": 2,<br> "no-dupe-class-members": 2,<br> "no-dupe-keys": 2,<br> "no-duplicate-case": 2,<br> "no-empty-character-class": 2,<br> "no-empty-pattern": 2,<br> "no-eval": 2,<br> "no-ex-assign": 2,<br> "no-extend-native": 2,<br> "no-extra-bind": 2,<br> "no-extra-boolean-cast": 2,<br> "no-extra-parens": [2, "functions"],<br> "no-fallthrough": 2,<br> "no-floating-decimal": 2,<br> "no-func-assign": 2,<br> "no-implied-eval": 2,<br> "no-inner-declarations": [2, "functions"],<br> "no-invalid-regexp": 2,<br> "no-irregular-whitespace": 2,<br> "no-iterator": 2,<br> "no-label-var": 2,<br> "no-labels": [2, {<br> "allowLoop": false,<br> "allowSwitch": false<br> }],<br> "no-lone-blocks": 2,<br> "no-mixed-spaces-and-tabs": 2,<br> "no-multi-spaces": 2,<br> "no-multi-str": 2,<br> "no-multiple-empty-lines": [2, {<br> "max": 1<br> }],<br> "no-native-reassign": 2,<br> "no-negated-in-lhs": 2,<br> "no-new-object": 2,<br> "no-new-require": 2,<br> "no-new-symbol": 2,<br> "no-new-wrappers": 2,<br> "no-obj-calls": 2,<br> "no-octal": 2,<br> "no-octal-escape": 2,<br> "no-path-concat": 2,<br> "no-proto": 2,<br> "no-redeclare": 2,<br> "no-regex-spaces": 2,<br> "no-return-assign": [2, "except-parens"],<br> "no-self-assign": 2,<br> "no-self-compare": 2,<br> "no-sequences": 2,<br> "no-shadow-restricted-names": 2,<br> "no-spaced-func": 2,<br> "no-sparse-arrays": 2,<br> "no-this-before-super": 2,<br> "no-throw-literal": 2,<br> "no-trailing-spaces": 2,<br> "no-undef": 2,<br> "no-undef-init": 2,<br> "no-unexpected-multiline": 2,<br> "no-unmodified-loop-condition": 2,<br> "no-unneeded-ternary": [2, {<br> "defaultAssignment": false<br> }],<br> "no-unreachable": 2,<br> "no-unsafe-finally": 2,<br> "no-unused-vars": [2, {<br> "vars": "all",<br> "args": "none"<br> }],<br> "no-useless-call": 2,<br> "no-useless-computed-key": 2,<br> "no-useless-constructor": 2,<br> "no-useless-escape": 0,<br> "no-whitespace-before-property": 2,<br> "no-with": 2,<br> "one-var": [2, {<br> "initialized": "never"<br> }],<br> "operator-linebreak": [2, "after", {<br> "overrides": {<br> "?": "before",<br> ":": "before"<br> }<br> }],<br> "padded-blocks": [2, "never"],<br> "quotes": [2, "single", {<br> "avoidEscape": true,<br> "allowTemplateLiterals": true<br> }],<br> "semi": [2, "never"],<br> "semi-spacing": [2, {<br> "before": false,<br> "after": true<br> }],<br> "space-before-blocks": [2, "always"],<br> "space-before-function-paren": [2, "never"],<br> "space-in-parens": [2, "never"],<br> "space-infix-ops": 2,<br> "space-unary-ops": [2, {<br> "words": true,<br> "nonwords": false<br> }],<br> "spaced-comment": [2, "always", {<br> "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]<br> }],<br> "template-curly-spacing": [2, "never"],<br> "use-isnan": 2,<br> "valid-typeof": 2,<br> "wrap-iife": [2, "any"],<br> "yield-star-spacing": [2, "both"],<br> "yoda": [2, "never"],<br> "prefer-const": 2,<br> "object-curly-spacing": [2, "always", {<br> "objectsInObjects": false<br> }],<br> "array-bracket-spacing": [2, "never"]<br> }<br>}<br></span>
1 . 在项目根目录下的<span style="font-size: 14px;">package.json</span>
文件中的加入如下代码:<span style="font-size: 14px;">scripts</span>
下:
<span style="font-size: 14px;">"lint": "eslint --fix --ext .js,.vue src"<br></span>
和<span style="font-size: 14px;">devDependencies</span>
下:
<span style="font-size: 14px;">"eslint": "^3.19.0",<br>"eslint-plugin-vue": "^2.1.0",<br></span>
在项目根目录终端下运行<span style="font-size: 14px;">cnpm i</span>
npm run lint
<p>/*eslint-disable */<a href="http://www.php.cn/js-tutorial-382635.html" target="_self"></a></p>
을 전달하여 다음 코드가 코드 사양 확인을 허용하지 않도록 하고 <p>/*eslint-를 전달할 수 있습니다. 활성화 */<a href="http://www.php.cn/html5-tutorial-369892.html" target="_self"></a></p>
다음 코드는 코드 사양 확인을 다시 수락하고 <p>// eslint-disable-line no-undef<a href="http://www.php.cn/js-tutorial-364405.html" target="_self"></a></p>
를 전달하여 코드 한 줄을 만듭니다. 사양 확인 대상이 아니며 정의되지 않은 변수가 있을 수 있습니다🎜🎜구성 방법🎜🎜🎜주로 vscode 플러그인 설치 및 구성과 명령줄 플러그인 설치 및 구성이 포함됩니다🎜🎜step1 vscode 플러그인 설치 및 구성🎜
🎜eslintrc.json🎜
🎜 파일을 만들고 추가 다음 코드: 🎜🎜🎜🎜rrreee🎜package.json🎜
에 다음 코드를 추가합니다. >🎜 프로젝트 루트 디렉터리의 파일: 🎜scripts🎜
🎜Down: 🎜🎜rrreee🎜🎜and🎜devDependities🎜
🎜Down : 🎜🎜rrreee 🎜cnpm i🎜
🎜🎜🎜🎜🎜Done.🎜🎜🎜🎜을 실행합니다. 🎜🎜 관련 추천: 🎜🎜🎜🎜 Vue-CLI를 사용하여 다중 페이지 응용 프로그램 방법을 개발하는 방법 🎜🎜🎜🎜 vue-cli를 사용하여 vue 프로젝트 및 웹팩을 빌드하는 방법은 무엇입니까? 🎜🎜🎜🎜Vue-cli 관련 예시 요약🎜🎜위 내용은 vue-cli vscode 구성 eslint의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!