vue项目中使用eslint

2022年6月25日10:17:31

1、安装
@vue/cli-plugin-eslint
babel-eslint
eslint
eslint-plugin-vue
2.项目根目录添加.eslintrc.js

module.exports={
  root:true,
  parserOptions:{
    parser:'babel-eslint',
    sourceType:'module'},
  env:{
    browser:true,
    node:true,
    es6:true},extends:['plugin:vue/recommended','eslint:recommended'],// add your custom rules here// it is base on https://github.com/vuejs/eslint-config-vue
  rules:{'vue/max-attributes-per-line':[2,{
        singleline:10,
        multiline:{
          max:1,
          allowFirstLine:false}}],'vue/html-self-closing':['error',{'html':{'void':'never','normal':'never','component':'never'},'svg':'always','math':'always'}],'vue/singleline-html-element-content-newline':'off','vue/multiline-html-element-content-newline':'off','vue/name-property-casing':['error','PascalCase'],'vue/no-v-html':'off','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:['error','always',{null:'ignore'}],'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':0,'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':0,'no-debugger': process.env.NODE_ENV==='production'?2:0,'object-curly-spacing':[2,'always',{
        objectsInObjects:false}],'array-bracket-spacing':[2,'never']}}

这些是目前我的项目中使用到的配置项,需要别的配置项可以去eslint官网查找
3、vscode设置的setting.json加入代码

{"workbench.iconTheme":"vscode-icons-mac","workbench.colorTheme":"Dracula","files.exclude":{"**/.DS_Store":true,"**/.git":true,"**/.hg":true,"**/.svn":true,"**/bower_components":true,"**/CVS":true,"**/tmp":true},"workbench.activityBar.visible":true,"editor.minimap.enabled":false,"editor.tabSize":2,"[json]":{"editor.defaultFormatter":"vscode.json-language-features"},"files.watcherExclude":{"**/.git/objects/**":true,"**/.git/subtree-cache/**":true,// "**/node_modules/**": true,"**/tmp/**":true,"**/bower_components/**":true,"**/dist/**":true},"[javascript]":{"editor.defaultFormatter":"HookyQR.beautify"},"diffEditor.ignoreTrimWhitespace":false,"[jsonc]":{"editor.defaultFormatter":"vscode.json-language-features"},"files.associations":{"*.cjson":"jsonc","*.wxss":"css","*.wxs":"javascript","*.js":"javascriptreact"},"[javascriptreact]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[vue]":{"editor.defaultFormatter":"octref.vetur"},"[html]":{"editor.defaultFormatter":"vscode.html-language-features"},"git.confirmSync":false,"git.enableSmartCommit":true,"emmet.includeLanguages":{"wxml":"html"},"minapp-vscode.disableAutoConfig":true,"css.fileExtensions":["css","scss"],"fileheader.customMade":{"Author":"zxc","Date":"",// 设置后默认设置文件生成时间"LastEditTime":"",// 设置后,保存文件更改默认更新最后编辑时间"LastEditors":"zxc",// 设置后,保存文件更改默认更新最后编辑人"Description":"",},"fileheader.cursorMode":{"Author":"zxc","Date":"",// 设置后默认设置文件生成时间"func":"",},//"editor.fontLigatures":null,"search.followSymlinks":false,//"workbench.settings.editor":"json","[typescript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescriptreact]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"editor.suggestSelection":"first","vsintellicode.modify.editor.suggestSelection":"automaticallyOverrodeDefaultValue","[less]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"tslint.autoFixOnSave":true,"timeline.excludeSources":["git-history"],"gitlens.hovers.currentLine.over":"line","tabnine.experimentalAutoImports":true,"settingsSync.ignoredSettings":[],//"eslint.autoFixOnSave":true,"editor.codeActionsOnSave":{"source.fixAll.eslint":true},"files.autoSave":"off","window.zoomLevel":0,"cssrem.rootFontSize":100,"html.format.contentUnformatted":"","vetur.format.defaultFormatterOptions":{"validation":{"template":false},"js-beautify-html":{"wrap_attributes":"force-expand-multiline"},"prettyhtml":{"printWidth":100,"singleQuote":false,"wrapAttributes":false,"sortAttributes":false}},"vetur.validation.template":false,"todo-tree.tree.showScanModeButton":false,"eslint.codeAction.showDocumentation":{"enable":true},"search.exclude":{"**/node_modules":false}}

就可以使用拉

  • 作者:会飞的虫儿飞
  • 原文链接:https://blog.csdn.net/xxitcef/article/details/109575809
    更新时间:2022年6月25日10:17:31 ,共 6645 字。