01-eslint/vetur/preitter/vscode配置

2023-10-31 14:37:16

前言：大多数人一说起eslint是做语法规则校验的，prettier是代码格式化的，vetur是负责.vue文件的语法高亮，格式化等等，好像都知道哦，但是经不起细问，就好像又不明白了。包括网上一搜，各种配置一大堆，乱七八糟，根本没有一个线性梳理，真是让人头大。平时我们都是去复制别人的就得过且过的用着了，算了不说废话了～让我带你来梳理一下这三个到底怎么配合使用吧！

首先，分为两个部分：

第一：vscode插件工具类的eslint和prettiter以及vetur

作用是为在本地保存的时候，通过.eslintrc.js文件中所写的规则，eslint插件去让我们能实时的看到哪里不符合规则，鼠标放在波浪线上去会提示为什么错了；vetur,prettier可以通过配置，也是为了能在我们实时保存的时候，能立马按照我们设定的配置规则去做代码格式化。

01-eslint/vetur/preitter/vscode配置

第二：npm依赖，prettiter，vetur , eslint

安装npm这些包的依赖是为了我们能对整个项目的指定符合我们设定的每一个文件进行格式化，校验。属于自动化批量操作。

下面来说说npm包都需要安装哪些？并且都是干什么的？

1) 安装eslint相关依赖

npm install -D eslint eslint-plugin-vue

eslint是针对很多种开发语言的，针对每一个开发语言都有一个独立的插件，对应vue的就是eslint-plugin-vue了

2）安装prettier相关依赖：

npm install prettier  eslint-plugin-prettier eslint-config-prettier -D

eslint-plugin-prettier ：插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记

eslint-config-prettier：能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项。

至此，该安装的插件就安装上了。接下来我们贴一下各个文件的配置：

.eslintrc

module.exports = {
  root: true,
  parserOptions: {
    parser: ‘babel-eslint‘,
    sourceType: ‘module‘
  },
  // 配置的环境
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [‘plugin:vue/recommended‘, ‘eslint:recommended‘],
  rules: {
    // 开启 console
    ‘no-console‘: ‘off‘,
    // 禁止不必要的 catch 子句
    ‘no-useless-catch‘: ‘off‘,
    // 禁止使用异步函数作为 Promise executor
    ‘no-async-promise-executor‘: ‘off‘,
    // 可以出现未使用过的变量
    ‘no-unused-vars‘: ‘off‘,
    // vue项目中，判断是否为生产环境，如果是的话，就提醒，否则话可以使用debugger
    ‘no-debugger‘: process.env.NODE_ENV === ‘production‘ ? ‘warn‘ : ‘off‘,
    // tab缩进为4空格
    indent: [1, 2],
    // 关闭下列提醒
    ‘vue/html-self-closing‘: ‘off‘,
    ‘vue/html-closing-bracket-newline‘: ‘off‘,
    ‘vue/max-attributes-per-line‘: ‘off‘,
    ‘vue/html-indent‘: ‘off‘,
    ‘vue/singleline-html-element-content-newline‘: ‘off‘ //在vue中的template中如果标签内只有很短的内容，不要求其换行
  }
};

.eslintignore：忽略要被检测的

build/*.js
src/assets
public
dist
.eslintrc.js
node_modules/*

.prettierrc.js

module.exports = {
  printWidth: 120,
  singleQuote: true, // 使用单引号而不是双引号
  tabWidth: 2, // 会忽略vetur的tabSize配置
  semi: true, // 句尾是否加;
  useTabs: false, // 是否利用tab替代空格
  trailingComma: ‘none‘, // 多行时，尽可能打印尾随的逗号
  arrowParens: ‘avoid‘ // allow paren-less arrow functions 箭头函数的参数使用圆括号
};

.prettierignore：忽略要被格式化的

build/*.js
dist
node_modules/*

工作区的setting.json：（.vscode文件夹下的setting.json）

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // eslint配置项，保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 添加 vue 支持
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 设置不同文件使用的格式化配置（这里用的是vscode安装的prettier格式化插件）
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 对vue的配置
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "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.ts": "prettier",
  // vetur 缩进
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false,
  // #这个按用户自身习惯选择//格式化.vue中html, 直接这样写，不做配置的话是不换行的
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // #vue组件中html代码格式化样式
  "vetur.format.defaultFormatterOptions": {
    // 选用beautify作为格式化vue中template的插件
    "js-beautify-html": {
      "wrap_line_length": 120, // 设置多个字符后换行 0 表示忽略
      "wrap_attributes": "auto", // html 标签属性 换行设置[auto|force|force-aligned|force-expand-multiline] ["auto"]
      "end_with_newline": false // 在文件结尾添加新行
    },
    // 选用pretty作为格式化vue中template的插件
    // 与.prettierrc.js文件中的printWidth保持一致，这样npm run prettier时候就与手动保存时候格式一致
    "prettyhtml": {
      "printWidth": 120,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false,
      "trailingComma": false,
      "bracketSpacing": true
    }
  },
  "prettier.vueIndentScriptAndStyle": true //缩进Vue文件中style和script
}

用户的setting.json （自己可以个性化设置）

{
  // 图标主题（需要安装插件：vscode-icons-mac）
  "workbench.iconTheme": "vscode-icons-mac",
  //打开文件不覆盖
  "workbench.editor.enablePreview": false
}

package.json

1）中配置一个统一格式化的脚本命令

"prettier": "prettier --write ‘**/*.{js,css,scss,ts,vue,html}‘"

2）统一按照eslint修复的命令

"eslint": "eslint ‘**/*.{js,css,scss,ts,vue}‘ --fix"

注：工作区的setting.json是要传到git上的，是随着项目走的，这样才能保证每个人在down的时候做到都按照这些定好的规则去执行，vscode中用户的setting.json就是按照自己个性化的设置就配在这里，自己想怎么玩就怎么玩，就算用户的设置跟工作区的设置中有相同的配置，那么也是会按照工作区的设置为准，因为工作区的权重>用户的

～～～～原本想解释的清楚一点，想了想算了，太麻烦了，就按照这个配置先搞起来，自己悟吧～～～～

01-eslint/vetur/preitter/vscode配置

码农公寓

相关文章