基于VS Code的代码风格统一配置

项目开发很常用到,记录下搭建的过程。

基于vue-cli3新建一个项目

过程已经写过了~~~
参考这里vue-cli3新建项目

基于VS Code的代码风格统一配置

VS Code先安装这几个插件

Vetur、ESLint、Prettier-Code formatter

Beautify也挺好用的,不过和Prettier有冲突,放弃了~~

配置settings.json

这个可以全局配置,但是为了不影响导入项目时别人的设置,可以在当前项目的根路径里创建一个.vscode/settings.json文件,里面设置的配置只在当前项目生效。

我的配置如下:

{
    "workbench.colorTheme": "Monokai",
    "window.zoomLevel": 0,
    "editor.fontSize": 14,
    "editor.formatOnSave": true,
    //保存时eslint自动修复错误
    //保存自动格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.tslint": true,
        "source.fixAll.eslint": true
    },
    "prettier.singleQuote": true,
    "prettier.eslintIntegration": true,
    "prettier.tslintIntegration": true,
    "vetur.format.defaultFormatter.js": "none",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "git.enableSmartCommit": true
}

ESLint 和 Prettier 的冲突修复

由于需要同时使用prettier和eslint,prettier的一些规则和eslint的一些规则可能存在冲突,如prettier字符串默认是用双引号而esLint定义的是单引号的,这样格式化之后就不符合ESLint规则了。

要解决冲突就需要在Prettier的规则配置里也配置上和ESLint一样的规则,直接覆盖掉

配置.eslintrc.js

在当前项目的根路径里创建一个.eslintrc.js文件,配置如下:

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: ['plugin:vue/essential', 'eslint:recommended'],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        //强制使用单引号
        quotes: ['error', 'single'],
        //强制不使用分号结尾
        semi: ['error', 'never']
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
}
配置prettier

有2种方式,一种是直接在当前项目的根路径里新建一个.prettierrc文件,然后配置如下:

{
   //开启 eslint 支持
  "eslintIntegration": true,
  //使用单引号
  "singleQuote": true,
  //结尾不加分号
  "semi": false
}

上面的方式在我的工程里面有冲突,所以我采取第二种方式了,直接在VSCode的Preferences–>Settings里面设置,配置如下:

//开启 eslint 支持
"prettier.eslintIntegration": true,
//使用单引号
"prettier.singleQuote": true,
//结尾不加分号
"prettier.semi": false,

这样就解决了,每次保存文件的时候,代码都会格式化一遍的。足够统一多人开发项目的代码风格了,强迫症患者的福音!

工程代码

整个项目的代码在下面地址,参考commit就懂过程了

大屏开发框架工程代码

Logo

前往低代码交流专区

更多推荐