Vue学习篇-7、Vscode安装Eslint插件+Prettier插件进行代码格式化

一、安装Eslint依赖

1、项目目录下，vscode终端下运行下方命令

npm i eslint -D
./node_modules/.bin/eslint --init

运行结果：

enter键确认下一项


由于我使用的vue项目，所以选择vue.js

这个根据个人选择

space键进行确认选择



接下来，由于我这边已经安装过了，所以终端也没有再进行下去，但下一步选择yes进行安装即可

2、使用ESLint + Prettier 的组合，安装对应的依赖

npm un eslint-config-google
npm i prettier eslint-plugin-prettier  @vue/eslint-config-prettier -D

3、配置 .eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: ['plugin:vue/essential', '@vue/prettier'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}

4、配置 .prettierrc.js

module.exports = {
  tabWidth: 2,
  useTabs: false,
  semi: false,
  arrowParens: 'avoid',
  singleQuote: true,
  bracketSpacing: true,
  endOfLine: 'lf',
  trailingComma: 'none'
}

提示：在.eslintrc.js添加规则时，需要在.prettierrc.js也进行配置

二、下载插件

1、ESLint 支持自动格式化

2、Vetur 更好的支持 Vue 文件(与格式化无关)

3、Prettier 支持保存自动格式化代码

三、配置插件

1、打开文件>首选项>设置

2、打开setting.json

3、加入下面代码

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"editor.formatOnSave": true,

4、打开文件，就可以ctrl+s保存对文件进行格式化了

注意：如果出现Delete ␍eslint(prettier/prettier)警告,则在终端运行下面命令

npm run lint --fix

四、prettier配置详解

{
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}