手把手教你构建vue项目（微信h5以及hybrid混合开发）（六）——eslint和prettier相结合

最新推荐文章于 2024-03-07 08:51:51 发布

Tommy·Yang

最新推荐文章于 2024-03-07 08:51:51 发布

阅读量497

点赞数

分类专栏： Vue新手上路文章标签： vue prettier eslint

本文链接：https://blog.csdn.net/qq_29329037/article/details/105376435

版权

Vue新手上路专栏收录该内容

19 篇文章 1 订阅

订阅专栏

前面一开始的时候我并没有在项目中增加eslint代码规范，eslint对于协同工作和代码规范都是很重要的工具，那么现在就在已有的项目上配置eslint。

1.通过vue add eslint命令

官网配置地址
在这里插入图片描述

命令安装相关依赖之后，会弹出相关的配置选项
1） Pick an ESLint config，选择Prettier

2） Pick additional lint features: 选择Lint on save，即保存时修复错误语法

3）选完之后你会多出.eslint.js文件

2.在vue.config.js中进行eslint的相关配置

vue.config.js中的相关配置

module.exports = {
	// 在开发环境保存并且修复
  lintOnSave: process.env.NODE_ENV === 'development',
   // eslint报错遮罩
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  },
  chainWebpack(config){
  		// 注入eslint规则
		config.module.rule('eslint')
		config.module.rule('eslint').use('eslint-loader')
	}
}

3.vscode的eslint相关配置

1) 在vscode插件管理中添加vetur和prettier两个插件
在这里插入图片描述

2）配置settings.json文件
操作步骤
文件->首选项->设置

打开用户设置,setting.json文件

这里我直接粘贴我的配置文件，里面注释很详细

{
  "git.ignoreMissingGitWarning": true,
  "workbench.startupEditor": "newUntitledFile",
  "editor.suggestSelection": "first",
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  "window.zoomLevel": 0,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "files.associations": {
    "*.wpy": "vue",
    "*.wxss": "css",
    "*.htm": "html"
  },
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
  "open-in-browser.default": "google chrome", //默认浏览器
  // VScode 文件搜索区域配置
  "search.exclude": {
    "**/dist": true,
    "**/build": true,
    "**/elehukouben": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true,
    "**/node_modules/**": true,
    "**/bower_components/**": true,
    "**/image/**": true,
    "**/*.xml": true,
    "**/.history/**": true,
    "**/nbproject/**": true,
    "**/vscode/**": true
  },
  // 用来忽略工程打开的文件夹
  "files.exclude": {
    "**/.vscode": true,
    "**/.DS_Store": true,
    "**/.history": true,
    "**/nbproject": true
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact",
    "wxml": "html",
    "javascript": "javascriptreact"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src",
    "components": "${workspaceRoot}/src/components",
    "assets": "${workspaceRoot}/src/assets",
    "util": "${workspaceRoot}/src/util",
    "plugin": "${workspaceRoot}/src/plugin"
  },
  "cssrem.rootFontSize": 37.5,
  "leetcode.endpoint": "leetcode-cn",
  "C_Cpp.errorSquiggles": "Enabled",
  // 如果打开注释，文件中将不提醒eslint报错
  // "eslint.options": {
  //   "plugins": [
  //     "html"
  //   ]
  // },
  // -----------vetur 、 prettier结合配置eslint配置begin ----------------------
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // js-beautify-html settings here
    },
    "prettier": {
      // Prettier option here
      "semi": false,
      "singleQuote": true,
      "indent_size": "4",
      "indent_char": " ",
      "max_preserve_newlines": "5",
      "preserve_newlines": true,
      "keep_array_indentation": false,
      "break_chained_methods": false,
      "indent_scripts": "normal",
      "brace_style": "collapse",
      "space_before_conditional": true,
      "unescape_strings": false,
      "jslint_happy": false,
      "end_with_newline": false,
      "wrap_line_length": "0",
      "indent_inner_html": false,
      "comma_first": false,
      "e4x": false,
      "indent_empty_lines": false
    }
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.format.enable": true,
  // -----------vetur 、 prettier结合配置eslint配置end ----------------------
  "editor.wordWrap": "on",
  "terminal.integrated.rendererType": "dom",
  "sync.gist": "",
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.forceUpload": true,
  // 修改作者
  "fileheader.Author": "Tommy·Yang",
  "fileheader.LastModifiedBy": "Tommy·Yang",
  "explorer.confirmDelete": false,
}

这些配置好之后需要自定配置规范的可以到eslint官网进行查阅，并在.eslintrc.js文件中进行相关规则的配置。

我给大家看看配置后的效果，基本上每次自动报错都保存的时候都会修复
在这里插入图片描述

最后说明一点，如果你的项目中之前忘记加了eslint，这时候你的项目文件会有很多eslint报错信息，那么此时你可以执行yarn lint / npm run lint 命令可以修复大部分eslint报错。

Tommy·Yang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
手把手教你构建vue项目（微信h5以及hybrid混合开发）（六）——eslint和prettier相结合

前面一开始的时候我并没有在项目中增加eslint代码规范，eslint对于协同工作和代码规范都是很重要的工具，那么现在就在已有的项目上配置eslint。1.通过vue add eslint命令官网配置地址命令安装相关依赖之后，会弹出相关的配置选项1） Pick an ESLint config，选择Prettier2） Pick additional lint features: ...
复制链接

扫一扫