css를 작성할 때 매번 prefix를 작성하기가 번거로워서 VSCode의 확장프로그램을 설치해봤다.
1. css-auto-prefix
일단 별점이 높고 사용이 간편하다. css속성을 작성하면 알아서 prefix가 생성이 된다. 기본 속성을 수정하면 prefix의 속성까지 수정이 된다.
하지만 내가 자주 쓰는 display: flex 속성을 포함한 몇몇 속성들이 나오지 않았다. 그렇다고 원하는 속성을 추가하거나 하는 기능들도 제공하지 않았다.
일부 속성들만 손으로 prefix를 추가하는 것이 번거로워서 다른 확장프로그램을 찾아보게 되었다.
2. Autoprefixer
처음 설치했을 때 Autoprefixer: Find External Autoprefixer라는 옵션이 선택되어 있는데 이게 선택되어 있으면 구동을 하지 않는다. 외부에 prefix 설정을 추가할 경우 선택하는 것 같다.
추가로 기능에 대한 설정이 가능하다.
"autoprefixer.options": {
"grid": true,
"browsers": [
"last 4 versions",
"ie >= 9",
"> 5%"
]
}나는 두 가지를 설정해주었다.
1. display: grid의 경우엔 prefix를 사용하는 데에 제한이 있기 때문에 기본적으로 grid는 prefix 기능이 꺼져있다. (이것 때문에 이 확장프로그램 자체가 구동하지 않는 줄 알고 한참 헤맸다..)
2. 지원 브라우저 버전에 제한을 걸 수 있다. 쓸데없이 많은 prefix를 사용하는 것을 막아준다.
css-auto-prefix와는 다르게 prefix가 바로바로 나오지는 않고 실행을 시켜줘야 한다. 작업을 끝내고 마지막에 실행시켜주면 되어서 코드를 보기에는 css-auto-prefix보다 쉽다. 하지만 수정을 할 때 prefix까지 지우고 다시 써줘야 하므로 css-auto-prefix보다 불편할 수 있다.
참고 사이트: mrmlnc/vscode-autoprefixer
