vscode中开启eslint和prettier，对代码进行校验和格式化

我们一个团队在开发代码的时候, 代码的格式和代码的风格要统一，这样子在开发起来也会顺心。我主要是运用了eslint和prettier进行代码的校验，我们已保存代码就会触发prettier进行代码格式化优化。

我主要是写的vue框架，所以针对的也是vue。

第一步：安装vscode中的插件并开启

2.新建.prettierrc.js, eslintrc.js和.eslintignore文件

.prettierrc.js文件：prettier的设置文件（按需添加）

//文档https://prettier.io/docs/en/options.html

module.exports = {
  tabWidth: 2,
  singleQuote: true,
  printWidth: 120,  // 最大长度120个字符
  semi: false, // 行末分号
  singleQuote: true,  // 单引号
  jsxSingleQuote: false,   // JSX双引号
  // 尽可能使用尾随逗号（包括函数参数）
  trailingComma: "none",
  // 在对象文字中打印括号之间的空格。
  bracketSpacing: true,
  // > 标签放在最后一行的末尾，而不是单独放在下一行
  jsxBracketSameLine: false,
  // 箭头圆括号
  arrowParens: "always", // 箭头函数单个参数时加括号
  // 在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。
  insertPragma: false,
  // 缩进
  tabWidth: 2,
  // 使用tab还是空格
  useTabs: false,
  // 行尾换行格式
  endOfLine: "auto",
  HTMLWhitespaceSensitivity: "ignore",
  // 为了避免在vue文件中不起效果
  extends: [
    //继承 vue 的标准特性
    "plugin:vue/essential",
    "eslint:recommended",
    //避免与 prettier 冲突
    "plugin:prettier/recommended",
  ]
};

.eslintrc文件：eslint的设置文件（按需添加）

 module.exports = {
  root: true,
  parserOptions: {
    // 设置为 "script" (默认)或"module"（如果你的代码是 ECMAScript 模块)
    sourceType: 'module',
    //emcaVersion用来指定你想要使用的 ECMAScript 版本
    ecmaVersion: 6,
    // 解析器
    parser: 'babel-eslint'
  },
  // eslint的环境
  env: {
    browser: true,
    node: true,
    es6: true
  },
  // 启用的规则，因为是用vue框架，所以建议用plugin:vue/essential和@vue/prettier，eslint:recommended是eslint本身的
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  // required to lint *.vue files
  plugins: ['html', 'vue'],
  // add your custom rules here
  rules: {
    semi: [0, 'always'], //强制语句分号结尾
    'arrow-parens': 0, //箭头函数用小括号括起来
    // 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    // 关键字前后空格
    'keyword-spacing': [
      2,
      {
        before: true,
        after: true
      }
    ],
    // 条件语句中赋值语句
    'no-cond-assign': 2,
    // 单行代码块两边加空格
    'block-spacing': [2, 'always'],
    // 键值对当中冒号与值之间要留空白
    'key-spacing': [
      2,
      {
        beforeColon: false,
        afterColon: true
      }
    ]
  }
};

.eslintignore文件

3. 安装所需要的依赖

eslint
prettier
prettier-eslint-cli
eslint-plugin-vue
eslint-plugin-prettier
@vue/eslint-config-prettier
eslint-plugin-html
@vue/cli-plugin-eslint

下面这个图片是我所安装的依赖：

4. 配置vscode中setting

{
  "workbench.colorTheme": "One Dark Pro",
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  // 这里是把格式化代码默认成prettier
  "vetur.format.defaultFormatter.html": "prettier",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

最后，在写代码的时候不符合的语法就会报警告，保存的时候会将代码格式化啦！