VSCode-老项目加入eslint + prettier

0. 安装插件

• eslint
• perttier -code formatter

 

1. 在项目中安装eslint

npm install -D eslint

2. 项目中初始化eslint

eslint --init

之后会出现一些询问：

eslint --init 做了什么？

• 生成eslint配置文件【与上述选项相关】

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

• 安装了以下插件

"eslint-config-standard": "^14.1.1",

  "eslint-plugin-import": "^2.20.2",

  "eslint-plugin-node": "^11.1.0",

  "eslint-plugin-promise": "^4.2.1",

  "eslint-plugin-standard": "^4.0.1",

  "eslint-plugin-vue": "^6.2.2", // 检测template模板中的问题

安装完成之后发生了什么？

我的所有文件都红了..... 离成功已经不远了!

3. 配置package.json 自动检测

// 在scripts中加入以下命令：
"lint": "eslint --ext .js,.vue src"

执行一下就可以看到一堆报错了===》 错误太多，吓得我中途退出

4. 安装prettier插件

npm install --save-dev eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

配置prettierrc.js

// 项目根目录下新建prettierrc.js 并加入以下配置项
module.exports = {
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": false,
  "proseWrap": "preserve",
  'singleQuote': true,
  "endOfLine": "auto" 
}

配置eslintrc.js

// eslintrc.js中extends字段中加入plugin:prettier/recommended
  extends: ['plugin:vue/essential', 'standard', 'plugin:prettier/recommended'],

5. 配合lint-fix 自动修正

// 在package.json的scripts中加入以下命令：
"lint-fix": "eslint --ext .js,.vue src --fix"

运行 npm run lint 【17：38开始运行，17：51 这个命令还没有任何动静===】

于是我决定人肉fix

6. 开启编辑器自动修复

vscode版本： 1.45.1【不同的版本配置有些许区别】

// 在编辑器setting.json中加入以下代码
/* eslint插件配置 */
  "eslint.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true, //eslint保存文件时自动修复
  },
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "jsx"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue"
    ]
  },

按下ctrl + s 世界都清净了

7. 不能被自动格式化的报错

保存时按照lint工具格式化已经解决了大部分问题，但是仍然有一部分是要自己手动解决的，比如 == 必须写成===；比如no-unused-expressions定义了变量却没有使用 等等等等

如果你觉得有些规矩不合适你，可能是你的问题，学着适应！但是如果已经感受到生理上的不适了， 那么就在eslint 配置工具中把它忽略吧😀取其精华去其糟粕~

8. 遗留的问题

单独的scss文件不能被格式化

解决方式： 安装stylelint-plus

自动格式化配置如下：

// 在vscode setting.json中配置  
"[scss]": {
    "editor.formatOnSave": true
  },

本文来自

随手记