前端代码规范使用eslint airbnb 规则 blog.csdn.net/caoyan0829/…

主要体现于新创建的vue项目，老项目因为修改会过于多，怕出现问题所以先不用eslint规范，但可以使用一些代码格式规范，比如空行等。

1、创建vue项目后全局安装eslint

npm install eslint -g

2、创建eslint配置

项目目录下执行 eslint --init （可根据情况修改）

选择好后会自动安装airbnb的依赖

安装好后根目录会有一个。.eslinttrc文件，这是eslint的配置文件

3、创建一个.eslintignore文件用来忽略eslint检测哪些文件

配置：

/build/

/config/

/dist/

/*.js

（根据实际情况修改）

4、全局安装vue eslint插件

npm i -g eslint-plugin-vue
复制代码

5、vscode安装eslint、Beautify插件、vetur插件

6、其他相关配置

vscode编辑器依次打开文件-首选项-设置-扩展-在seetings.json中编辑

在你已有的配置后加上下面这些配置

{
  "terminal.integrated.shell.osx": "/bin/zsh",
  "files.autoSave": "afterDelay",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.printWidth": 200,
  "explorer.confirmDelete": false,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "axml": "xml"
  },
  "terminal.integrated.rendererType": "dom",
  "background.style": {
    "opacity": 0.1
  },
  "background.enabled": true,
  "editor.formatOnSave": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "beautify.config": {
    "brace_style": "collapse,preserve-inline"
  },
  "vetur.format.options.tabSize": 2,
  "editor.tabSize": 4,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

打开.eslintrc文件，在rules里配置：因为eslint airbnb有些规则有点不人性化，所以需要自己修改一些，我暂时修改了下面一些配置，以后有发现欢迎补充

"linebreak-style": [0, "error", "windows"],   //代码行尾检测关闭
"class-methods-use-this": "off",    // 关闭强制使用this
"no-console": "off",  //可以使用console
"semi": 0,  // 关闭检测分号
"import/no-extraneous-dependencies": ["error", {   //关闭引入文件时的eslint检测
"devDependencies": true
}],
"lines-between-class-members": "off"   // 关闭每个类之间的空行
复制代码

至此，配置完成，点开一个vue文件试一下保存会不会自动格式化

vscode 执行 code . 使用vscode打开当前项目

手动打开vscode
command + shift + p 打开命令面板（或者点击菜单栏查看>命令面板）
输入shell（选择"install code command in PATH"）
打开终端进入需要用IDE打开的文件夹输入"code ."

好用的快捷键

command + shift + e：切换聚焦的窗口
Go to Definition: 需要自己设置
Terminal:kill:关闭active

vscode 支持自动格式化vue、ts、json文件