作业：代码格式解决方案

Answer 1

提问者 LiGNaiXO 2021-11-29 12:30:51

作业：代码格式

一、npm包与vscode插件

1.npm包出现时间早于vscode插件

2.当安装了eslint包后，总用命令行控制代码统一格式太麻烦，于是出现eslint在vscode中的插件

3.每次书写代码时，由于插件的实时提醒，我们能直接得知当前代码是否符合规范

4.同时可以在插件中设置保存即格式化代码，非常便捷

二、eslint与prettier

1.eslint用作代码规范，检查变量声明是否调用等

2.prettier仅用于处理代码的风格问题

3.每次保存后出现代码规范反复横跳

<1>先是eslint起作用并按其规则格式化代码
<2>然后prettier起作用格式代码，且覆盖了eslint
<3>出现黄线提醒，则是插件中的eslint没有符合格式规则所报的问题
<4>这时的eslint与prettier就相互矛盾了

三、解决方案(仅参考)

1.vue脚手架默认eslint+prettier

2.根目录引入.prettierrc.js文件(效果与.prettierrc的json文件一致)

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

3.在.eslintrc.js文件中，修改部分配置

//extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
extends: ["plugin:vue/essential", "eslint:recommended"],

提示：若团队中其他人一致开发，则需要在开发完成后，解开上方注释并npm run lint回到最原始状态再push

4.附上vscode关于eslint与prettier的配置(前提是安装了eslint、prettier插件)

 // 10.保存时自动格式化
  "editor.formatOnSave": true,

  // 11.配置ESLint检查的文件类型
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "editor.codeActionsOnSave": {
    // 保存时eslint自动修复错误
    "source.fixAll.eslint": true
  },

  // 12.将代码按prettier格式化html,js,json;按vetur格式化vue
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 超过最大值换行
  "prettier.printWidth": 150

• 提问者 LiGNaiXO #1

  发布作业有点问题，干脆就在问答区自问自答了