vue中配置eslient


##### 1、安裝項

```
安裝
yarn add eslient 或 npm i -g eslient
yarn add prettier
yarn add eslint-plugin-prettier
yarn add eslint-plugin-html
yarn add eslint-bable
```

##### 2、以vscode爲例,vscode提供了大量的插件,使用Prettier插件搭配eslint插件使用。

##### 3、新建.eslintrc.js配置規則,也可以在package.json中配置,以.eslintrc.js爲例
```
module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
    },
    parserOptions: {
        parser: 'babel-eslint',
    },
    extends: ['eslint:recommended', 'plugin:vue/recommended'],
    // required to lint *.vue files
    plugins: ['vue', 'prettier'],
    // add your custom rules here
    rules: {
        'indent': 1, // 縮進
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 待定
        'vue/html-closing-bracket-newline': [
            'error',
            {
                singleline: 'never',
                multiline: 'always',
            },
        ],
        'vue/require-default-prop': 0,
        'vue/require-prop-types': 0,
        'vue/no-side-effects-in-computed-properties': 1,
        'vue/require-component-is': 0,
        'vue/no-use-v-if-with-v-for': 0,
    },
};

```
這樣,就可以實現代碼風格的統一,當我們保存代碼的時候,就會自動修復代碼格式了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章